Menu ▼


AngularJS expression JSON object example

In this article we will see how to use AngularJS expression with JSON object.

Example:
JSON Object: [ { name: "Steave", grade: "A" }, { name: "Mark", grade: "C" }, { name: "Robert", grade: "B" }, { name: "Jenny", grade: "B" }, { name: "James", grade: "A" } ]

Example 1:
In this example we will display students list in list item using ng-repeat directive and angular expressions on JSON object.

Students List
  • Name : {{ student.name }} , Grade : {{ student.grade}}


Example 2:
In this example we will display the student name and grade based on the index given in the input control.

Enter index of student

Student Name: {{ students[listind].name }}
Grade: {{ students[listind].grade }}

sourcecode
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
</head>
<body>
    <div ng-app="SampleApp" ng-controller="SampleCntrl">
        <strong>JSON Object: </strong>[ { name: "Steave", grade: "A" }, { name: "Mark",
        grade: "C" }, { name: "Robert", grade: "B" }, { name: "Jenny", grade: "B" }, { name:
        "James", grade: "A" } ]
        <br />
        <br />
        <strong>Example 1:</strong>
        <br />
        In this example we will display students list in list item using ng-repeat directive
        and angular expressions on JSON object.
        <br />
        <br />
        <strong>Students List</strong><br />
        <ul>
            <li ng-repeat="student in students">Name : {{ student.name }} , Grade : {{ student.grade}}
            </li>
        </ul>
        <hr />
        <br />
        <strong>Example 2:</strong>
        <br />
        In this example we will display the student name and grade based on the index given
        in the input control.
        <br />
        <br />
        Enter index of student
        <input type="text" ng-model="listind" />
        <br />
        <br />
        Student Name: <strong>{{ students[listind].name }}</strong>
        <br />
        Grade: <strong>{{ students[listind].grade }}</strong>
        <br />
    </div>
    <script>
        var myapp = angular.module("SampleApp", []);
        myapp.controller("SampleCntrl", function ($scope) {
            $scope.students = [
            { name: "Steave", grade: "A" },
            { name: "Mark", grade: "C" },
            { name: "Robert", grade: "B" },
            { name: "Jenny", grade: "B" },
            { name: "James", grade: "A" }
            ];
            $scope.listind = 3;
        });
    </script>
</body>
</html>





comments powered by Disqus


Search dotnetlearners.com