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

【问题标题】：how to call particular user json data by clicking on button in custom directory in angular.js如何通过单击angular.js中自定义目录中的按钮来调用特定的用户json数据
【发布时间】：2016-03-03 10:02:49
【问题描述】：

我是 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': "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>

【问题讨论】：

您分配学生的语法是错误的，您也不能像这样更改传递给函数的对象，因为它是通过引用传递的，您修改的是引用而不是对象本身。
你的数据最好使用factory或service而不是directive.你可以寻找更好的理解stackoverflow.com/questions/15666048/…。

标签： javascript jquery angularjs json

【解决方案1】：

1) 使用 angular.value 存储本地值，使用 angular.factory 从外部服务获取数据

2) 使用 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上查看完整的工作示例

【讨论】：