All geek questions in one place

How to call specific json user data by clicking a button in a user directory in angular.js

I am new to angular.js. I want to call the json data that is inside the custom directory and click on a separate user button. I want to display the information for this particular user. I can not achieve this. The following is my code.

index.html

<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <!-- JS --> <!-- load angular, ngRoute, ngAnimate --> <script src="./bower_components/angular/angular.js"></script> <script src="./bower_components/angular-route/angular-route.js"></script> <script src="./bower_components/angular-animate/angular-animate.js"></script> <script src="index3.js"></script> </head> <body> <!--<div class="container">--> <!--<div ng-controller="ProductController">--> <!--<h2>{{name}}</h2>--> <!--</div>--> <div ng-controller="studentController"> <my-firstdirective></my-firstdirective> </div> </div> </body> </html>

index.js

 var myApp=angular.module("myApp",[]); myApp.controller("ProductController",function($scope){ $scope.name="shar"; }); var myApp=angular.module("myApp",[]); myApp.controller("studentController",['$scope',function($scope) { }]); myApp.directive('myFirstdirective',function() { return { templateUrl: "productTemplate.html ", replace: true, restrict: 'E', controller: function ($scope) { $scope.setGrade = function (student) { student =[ s1= { 'grade': 'sharv', 'Email': " shar123@gmail.com ", 'contact': '1234567890' }, { 'grade': 'pooja', 'Email': " pooja123@gmail.com ", 'contact': '237790864322' } ]; } } } })

producttemplate.html

 <div class="jumbotron"> <table class="table table-inverse"> <thead> <tr> <th>First Name</th> <th>Detail</th> </tr> </thead> <tbody> <tr> <td>sharvari</td> <td><button class="btn btn-success" ng-click="setGrade(student)">Details</button></td> </tr> <tr> <td>pooja</td> <td><button class="btn btn-success" ng-click="setGrade(student)">Details</button></td> </tr> <tr> <td>ruchi</td> <td><button class="btn btn-success" ng-click="setGrade(student)">Details</button></td> </tr> </tbody> </table> <style> .panel{ width:500px; } </style> <div ng-show="!!student.grade"> <div class="panel panel-default"> <div class="panel-body"> Details of {{student.grade}}<br> name:{{student.grade}}<br> Email:{{student.Email}}<br> contact:{{student.contact}} </div> </div> </div> </div>
+5
source share
1 answer

1) Use angular.value for locally stored values ​​and angular.factory to retrieve data from an external service

2) Use ng-repeat to iterate through users:

 <tr ng-repeat="user in users"> <td>{{ user.grade }}</td> <td>{{ user.Email }}</td> <td>{{ user.contact }}</td> <td> <button ng-click="setGrade(user)"> Click me to choose this user </button> </td> </tr>

See full working ewample on plunkr

0
source

Source: https://habr.com/ru/post/1244345/

More articles:


All Articles