如何通过点击angular.js中的自定义目录中的按钮来调用特定用户json数据

我是angular.js的新手。我想调用json数据，它位于自定义目录中，并且点击特定用户按钮的onclick以显示该特定用户的信息。我无法实现此目的。以下是我的代码。如何通过点击angular.js中的自定义目录中的按钮来调用特定用户json数据

的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': "[email protected]", 
         'contact': '1234567890' 

      }, 
        { 
         'grade': 'pooja', 
         'Email': "[email protected]", 
         '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>

来源

2016-03-03 sharvari

您的分配学生的语法错误，你也无法改变通过这样的功能，因为它的对象通过引用传递，并且修改引用而不是对象本身。 – jcubic

最好使用'factory'或'service'作为你的数据而不是'directive.'，你可以寻找更好的理解http://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory。 –

1）使用angular.value用于本地存储的值和angular.factory用于取入来自外部服务的数据

2）使用NG-重复通过用户迭代：

<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>

查看plunkr完整的工作ewample

来源

2016-03-03 10:42:01

如何通过点击angular.js中的自定义目录中的按钮来调用特定用户json数据

回答

相关问题