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面试笔记-eBackup有哪几种备份组网方式，各备份组网方式主要的应用场景及备份流程？

    应用场景: LAN-Base一般用于备份数据量小,且对备份窗口没有特殊要求的场景,此类场景下备份服务器和备份代理一般是虚拟机部署. LAN-Free一般用于备份数据量较大,且对备份窗口要求比较严格的场 ...

  2. P2012-拯救世界2【EGF】

    正题 题目链接:https://www.luogu.com.cn/problem/P2012 题目大意 \(12\)种东西排列成长度为\(n\)的序列,要求前四种出现奇数次,后四种出现偶数次,求方案. ...

  3. C# WPF MVVM项目实战(进阶②)

    这篇文章还是在之前用Caliburn.Micro搭建好的框架上继续做的开发,今天主要是增加了一个用户窗体ImageProcessView,然后通过Treeview切换选择项之后在界面显示不同效果的图片 ...

  4. WinForm 控件 DataGridView 常用操作

    1.取消列自动生成 在窗体load事件里面设置表格dataGridView的AutoGenerateColumns为 false dataGridView.AutoGenerateColumns = ...

  5. Java基础之（七）：Scanner对象

    用户交互Scanner Scanner对象 调用java.util.Scanner 可以通过Scanner类来获取用户的输入 基本语法: Scanner scanner = new Scanner(S ...

  6. 使用 PyTorch Lightning 将深度学习管道速度提高 10 倍

    ​  前言  本文介绍了如何使用 PyTorch Lightning 构建高效且快速的深度学习管道,主要包括有为什么优化深度学习管道很重要.使用 PyTorch Lightning 加快实验周期的六种 ...

  7. 洛谷1501 Tree II（LCT，路径修改，路经询问）

    这个题是一个经典的维护路径信息的题,对于路径上的修改,我们只需要把对应的链\(split\)上来,然后修改最上面的点就好,注意pushdown的时候的顺序是先乘后加 然后下传乘法标记的时候,记得把对应 ...

  8. 解决GitHub访问慢

    话不多说,上干货~~~ 1. 打开 http://tool.chinaz.com/dns/ ,在输入框中填写 github.com,然后点击检测按钮,会列出响应ip,如图: 2. 找到hosts文件, ...

  9. 【c++ Prime 学习笔记】第8章 IO库

    C++语言不直接处理输入输出,而是通过标准库中的一组类来处理IO 1.2节介绍的IO库: istream(输入流)类型,提供输入 ostream(输出流)类型,提供输出 cin,是istream对象, ...

  10. TreeSet和TreeMap中“相等”元素可能并不相等

    TreeSet和TreeMap元素之间比较大小是借助Comparator对象的compare方法. 但有些时候,即便compare()返回0也不意味着这两个元素直观上相同. 比如元素是二元组[a,b] ...