2016-03-03 13 views
5

angular.js’de yeniyim. Özel bir dizinin içinde yer alan json verilerini ve belirli bir kullanıcı düğmesinin onclick'ini aramak istiyorum. Bu özel kullanıcının bilgilerini görüntülemek istiyorum. Bunu başaramadım.Özellik benim kodum.özel kullanıcı json verisini angular.js'deki özel dizinde tıklatarak nasıl arayabilirim?

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

atama öğrenciler için Kişisel sözdizimi bunu çünkü böyle işlev geçirilen nesne değiştiremezsiniz da yanlıştır referans ile geçirilir ve referansı nesnenin kendisi üzerinde değiştirmezsiniz. – jcubic

+0

Verileriniz için 'factory' veya' service' kullanmak daha iyidir, daha iyi bir anlayış için http://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory. –

cevap

0

1) alma için yerel depolanmış değerler ve angular.factory için angular.value kullanın harici hizmetten elde edilen veriler

kullanıcılar arasında yineleme 10

2) Kullanım ng-repeat:

<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 tam çalışma ewample bakın

İlgili konular