how to call particular user json data by clicking on button in custom directory in angular.js

Question

I am new to angular.js. I want to call json data which is inside a custom directory and onclick of a particular user button i want to display the information of that particular user.I have unable to achieve this.Following is my code.

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>

Your syntax for assigning students is wrong also you can't change object passed to function like that because it's passed by reference and you modify the reference not the object itself. — jcubic, Mar 03 '16 at 10:08
It's better to use `factory` or `service` for your data not `directive.` you can look for better understanding http://stackoverflow.com/questions/15666048/angularjs-service-vs-provider-vs-factory . — Ramesh KC, Mar 03 '16 at 10:13

score 0 · Accepted Answer · answered Mar 03 '16 at 10:42

1) Use angular.value for local stored values and angular.factory for fetching data from external service

2) Use ng-repeat to iterate through users:

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

See full working ewample on plunkr

how to call particular user json data by clicking on button in custom directory in angular.js

1 Answers1