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>