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. amber模拟kcl水溶液

    最近刚开始学习amber软件,看网上的教程勉强知道怎么操作这个amber了.就暂时跑了个分子动力学,其他的啥也没处理.先把我的操作过程记录下来吧,免得日后忘记. 一.构建kcl.pdb结构 利用Gau ...

  2. 微信小程序应用安全分析及设计

    针对微信关于小程序安全设计的分析 针对微信小程序开发配置及部分配置机制分析微信小程序安全设计: AppSecret 管理员生成AppSecret,在与微信后台交互过程中部分接口使用,如 auth.co ...

  3. 在Vue中使用JSX，很easy的

    摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...

  4. 关于 Binomial Coefficient is Fun

    题目传送门 Solution 应该这个做法不是很常见吧. 我们设 \(f_{i,j}\) 表示前面 \(i\) 个数,选出的数和为 \(j\) 的贡献之和.因为我们有以下式子: \[\sum_{i=a ...

  5. 题解 Sue的小球/名次排序问题/方块消除/奥运物流

    Sue的小球 名次排序问题 方块消除 奥运物流 Sue的小球 题目大意 有 \(n\) 个小球在下落,初始位置 \((x_i,y_i)\),下落速度为 \(v_i\).你初始位置在 \(x_0\),速 ...

  6. 浅尝装饰器和AOP

    [写在前面] 参考文章:https://www.cnblogs.com/huxi/archive/2011/03/01/1967600.html[从简单的例子入手进行讲解,由浅入深,很到位] 装饰器部 ...

  7. DOS命令和快捷键

  8. 第四代富士X100F操作学习

    前言 本文为自己通过B站的UP主[阿布垃机手册]整理.原视频地址:[阿布垃机手册][布瞎BB]富士 X100F 相机外部按键 拍人像自己的设置 [X100F相机光圈大小支持F2到F16+Auto]光圈 ...

  9. Java-基础-ArrayList

    1. 简介 ArrayList 实现了 List 接口,其底层基于数组实现容量大小动态可变.既然是数组,那么元素存放一定是有序的,并允许包括 null 在内的所有元素. 每个 ArrayList 实例 ...

  10. Java：HashMap类小记

    Java:HashMap类小记 对 Java 中的 HashMap类,做一个微不足道的小小小小记 概述 HashMap:存储数据采用的哈希表结构,元素的存取顺序不能保证一致.由于要保证键的唯一.不重复 ...