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;

        });
 

Part 15 AngularJS ng init directive的更多相关文章

  1. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

  2. part 4 AngularJS ng src directive

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. angularJs中自定义directive的数据交互

    首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...

  5. angularjs中的directive scope配置

    angularjs中的directive scope配置 定义directive其中重要的一环就是定义scope,scope有三种形式: 默认的scope,DOM元素上原有的scope scope: ...

  6. AngularJS: 'Template for directive must have exactly one root element' when using 'th' tag in directive template

    .controller('HomeController', function($scope,$location) { $scope.userName='天下大势,为我所控!'; $scope.clkU ...

  7. angularjs自定义指令Directive

    今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...

  8. AngularJS中有关Directive的汇总

    本篇通过几个例子对AngularJS中的Directive进行汇总. 例子1,单向绑定和双向绑定 <html ng-app="myApp"> <head> ...

  9. AngularJS自定义指令directive：scope属性 （转载）

    原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...

随机推荐

  1. 华为云计算IE面试笔记-请描述华为容灾解决方案全景图，并解释双活数据中心需要从哪些角度着手考虑双活设计

    容灾全景图: 按照距离划分:分为本地容灾 同城容灾 异地容灾  本地容灾包括本地高可用和本地主备.(本数据中心的两机房.机柜) 本地高可用这个方案为了保持业务的连续性,从两个层面来考虑: ①一个是从主 ...

  2. Django+Nginx+Uwsgi（全网最全步骤工作原理流程与部署历程）

    一.必要前提 1.1 准备知识 django 一个基于python的开源web框架,请确保自己熟悉它的框架目录结构. uWSGI 一个基于自有的uwsgi协议.wsgi协议和http服务协议的web网 ...

  3. MacOS下Java与JDK关系与相关路径

    MacOS下Java与JDK关系与相关路径 macOS下的Java与JDK的路径曾经困扰过我一段时间,今天稍有些忘记,故记下笔记,整理一下.Java与JDK的关系不在本文笔记之内,Javaer常识. ...

  4. Python Pandas的使用 ！！！！！详解

     Pandas是一个基于python中Numpy模块的一个模块 Python在数据处理和准备⽅⾯⼀直做得很好,但在数据分析和建模⽅⾯就差⼀些.pandas帮助填补了这⼀空⽩,使您能够在Python中执 ...

  5. 关于django配置好静态文件后打开相关图片页显示404的解决方法

    在url里设置以上代码即可,即可解决图片显示异常(出现此问题的根本原因是django版本)django3后需要加以上代码)

  6. AOP的简单介绍

    1.AOP简介 AOP面向切面编程,采取横向抽取机制,取代了传统纵向继承体系重复性代码(性能监视.安全检查.缓存) SpringAOP使用纯java实现,不需要专门的编译过程和类加载器,在运行期间以代 ...

  7. js--Symbol 符号基本数据类型

    前言 ECMAScript 6 中新增了 Symbol 符号这一基本数据类型,那么Symbol 是用来干什么的,对开发又有什么帮助呢?本文来总结记录一下 Symbol 的相关知识点. 正文 Symbo ...

  8. Django Model字段加密的优雅实现

    早前的一篇文章Django开发密码管理表实例有写我们写了个密码管理工具来实现对密码的管理,当时加密解密的功能在view层实现,一直运行稳定所以也没有过多关注实现是否优雅的问题.最近要多加几个密码表再次 ...

  9. 敏捷 Scrum Master 的難點

    什麼是 Scrum Master? Scrum master 是一個團隊角色,負責確保團隊遵守敏捷方法和原則並符合團隊的流程和實踐. Scrum Master 促進敏捷開發團隊成員之間的協作.Scru ...

  10. Java中的函数式编程（七）流Stream的Map-Reduce操作

    写在前面 Stream 的 Map-Reduce 操作是Java 函数式编程的精华所在,同时也是最为复杂的部分.但一旦你啃下了这块硬骨头,那你就真正熟悉Java的函数式编程了. 如果你有大数据的编程经 ...