Part 15 AngularJS ng init directive

The ng-init directive allows you to evaluate an expression in the current scope.  

In the following example, the ng-init directive initializes employees variable which is then used in the ng-repeat directive to loop thru each employee. In a real world application you should use a controller instead of ng-init to initialize values on a scope. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
</head>
<body ng-app>
    <div ng-init="employees = [
                    { name: 'Ben', gender: 'Male', city: 'London' },
                    { name: 'Sara', gender: 'Female', city: 'Chennai' },
                    { name: 'Mark', gender: 'Male', city: 'Chicago' },
                    { name: 'Pam', gender: 'Female', city: 'London' },
                    { name: 'Todd', gender: 'Male', city: 'Chennai' }
                ]">
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="employee in employees">
                    <td> {{ employee.name }} </td>
                    <td> {{ employee.gender}} </td>
                    <td> {{ employee.city}} </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

ng-init should only be used for aliasing special properties of ng-repeat directive. In the following example, ng-init is used to store the index of the parent element in parentIndex variable.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/Script.js"></script>
</head>
<body ng-app="myModule">
    <div ng-controller="myController">
        <ul>
            <li ng-repeat="country in countries" ng-init="parentIndex = $index">
                {{country.name}}
                <ul>
                    <li ng-repeat="city in country.cities">
                        {{city.name}} - Parent Index = {{ parentIndex }}, Index = {{ $index }}
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Script.js  

var app = angular
        .module("myModule", [])
        .controller("myController", function ($scope) {
            var countries = [
                {
                    name: "India",
                    cities: [
                        { name: "Hyderabad" },
                        { name: "Chennai" }
                    ]
                },
                {
                    name: "USA",
                    cities: [
                        { name: "Los Angeles" },
                        { name: "Chicago" },
                    ]
                }
            ];
 
            $scope.countries = countries;
        });

 

 
posted @ 2016-04-24 00:08  Gester.Lin  阅读(392)  评论(0)  编辑  收藏  举报