Part 15 AngularJS ng init directive
2016-04-24 00:08
561 查看
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.
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.
Script.js
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; });
相关文章推荐
- 使用angularjs ui-bootstrap遇到的问题
- django_restframework_angularjs
- scope 对象在 AngularJS 中充当数据模型的作用,也就是一般 MVC 框架中 Model 得角色.但又不完全与通常意义上的数据模型一样,因为 $scope 并不处理和操作数据,它只是建立了
- AngularJs + Bootstrap
- AngularJS vs. jQuery,看看谁更胜一筹
- Angular的简单入门:2个基本指令,MVC,模块化和SPA的概念
- 简单的angular表单验证指令
- Angularjs基础(七)
- AngularJS中的过滤器filter用法完全解析
- AngularJs初学
- angular ng-bind
- springMVC,jpa,springData,angularjs整合做个基本的CURD
- angular控制器
- angular双向数据绑定
- angularjs ng-if 慎用 备忘
- AngularJS 世界------Angularjs和Javascript以及表达式相关内容
- [AngularJS面面观] scope中的Dirty Checking(脏数据检查) --- 引言
- angularjs过滤器(filter)
- angularjs的post请求参数的转换,使之跟ajax一样参数供springMVC使用
- AngularJS中的过滤器filter用法完全解析