come chiamare particolari utenti json facendo clic sul pulsante nella directory personalizzata in angular.js

Sono nuovo di angular.js. Voglio chiamare i dati JSON che si trovano all'interno di una directory personalizzata e onclick di un particolare pulsante utente che voglio visualizzare le informazioni di quel particolare utente. Non riesco a raggiungere questo obiettivo. Seguito è il mio codice.come chiamare particolari utenti json facendo clic sul pulsante nella directory personalizzata in angular.js

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>

fonte

2016-03-03 sharvari

la sintassi per gli studenti l'assegnazione è sbagliato, inoltre, non è possibile modificare oggetto passato a funzionare in quel modo perché è passato per riferimento e tu modifichi il riferimento non l'oggetto stesso. – jcubic

È meglio usare 'factory' o' service' per i tuoi dati non 'direttiva '. Puoi cercare una migliore comprensione http://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory. –

1) Usare angular.value per valori memorizzati locali e angular.factory per il recupero dati da servizio esterno

2) Uso ng-repeat per scorrere utenti:

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

Visualizza intera ewample di lavoro sulla plunkr

fonte

2016-03-03 10:42:01

come chiamare particolari utenti json facendo clic sul pulsante nella directory personalizzata in angular.js

risposta

Problemi correlati