如何通過點擊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數據

回答

相關問題