距离第一篇笔记好久了，抽空把angular的笔记梳理梳理。

ng-init：初始化指令，这里可以声明变量，且变量不用指定数据类型(类似js中的var用法)。
数值变量与字符串相加默认做字符串拼接运算。
注：ng-init声明的变量皆为全局变量，不论ng-init定义在哪个标签声明的变量皆影响全局，且同名变量以最后一次为准(与js同理)。ng-init仅能声明变量，不能声明函数。

    <div ng-app="" ng-init="a=1;b=2;">

        <p>{{ a + b }}</p> <!-- 3 -->

    </div>
    <div ng-app="" ng-init="a=1;b=2;">

        <p>{{ a + b }}</p>    <!-- 600 -->

        <span ng-init="a=100;b=500;"></span>

    </div>

不论 ng-init 声明在什么位置，始终以最后一次声明为主。

ng-bind：数据绑定，与{{}}效果类似。
注：说明下ng-bind和{{}}的区别：一样的效果，但使用花括号语法时，在AngularJS使用数据替换模板中的花括号时，第一个加载的页面，通常是应用中的index.html，其未被渲染的模板可能会被用户看到。对于index.html页面中的数据绑定操作，建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。

    <div ng-app="" ng-init="a=1;b=2;">

        <p>{{ a+b }}</p>        <!-- 3 -->

        <p ng-bind="a+b"></p>    <!-- 3 -->

    </div>

输出结果一样。

    <div ng-app="" ng-init="people={name:'小明',age:18}">

        <p ng-bind="people.name"></p>    <!-- 小明 -->

        <p ng-bind="people.age"></p>    <!-- 18 -->

    </div>

声明对象

    <div ng-app="" ng-init="arr=[5,10,15,20,25]">

        <p ng-bind="arr[3]"></p>    <!-- 20 -->

    </div>

声明数组

ng-model：配合表单元素和 {{}} 、 ng-bind 做数据绑定，数据实时同步到 {{}} 、 ng-bind 元素上，MVC中的M：model。

    <div ng-app="" ng-init="today='星期六'">

        <select ng-model="today">

            <option value="星期一">星期一</option>

            <option value="星期二">星期二</option>

            <option value="星期三">星期三</option>

            <option value="星期四">星期四</option>

            <option value="星期五">星期五</option>

            <option value="星期六">星期六</option>

            <option value="星期天">星期天</option>

        </select>

        <p>今天{{ today }}</p>        <!-- 默认： 星期六 -->

    </div>

select 默认显示 星期六，当 select 值改变 {{}} 区域同步改变值。

来看一个实际应用场景

    <div ng-app="" ng-init="count=1;price=1;goodsName='上衣';">

        <p>

            <span>商品名：</span>

            <select ng-model="goodsName">

                <option value="裤子">裤子</option>

                <option value="T恤">T恤</option>

                <option value="上衣">上衣</option>

                <option value="衬衫">衬衫</option>

                <option value="夹克">夹克</option>

            </select>

        </p>

        <p><span>数量：</span><input type="number" ng-model="count"></p>

        <p><span>单价：</span><input type="number" ng-model="price"></p>

        <p>总价：<span ng-bind="count * price"></span></p>

    </div>

ng-repeat：angular的循环，类似 js 的 for in 循环结构。

<body ng-app="">

    <ul ng-init="fruits=['苹果','西瓜','梨子','橘子','葡萄']">

        <li ng-repeat="x in fruits"><a href="#" ng-bind="x"></a></li>

    </ul>

</body>

angularjs探秘<二>表达式、指令、数据绑定的更多相关文章

  1. Angularjs基础(二)

    AngularJS 表达式 AngularJS 表达式写在双大括号内:{{expression}} AngularJS 表达式把数据绑定到HTML,这与ng-bind 指令有异曲同工之妙 Angula ...

  2. 带你走近AngularJS - 创建自己定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  3. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  4. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  5. [.net 面向对象程序设计进阶] (6) Lamda表达式(二) 表达式树快速入门

    [.net 面向对象程序设计进阶] (6) Lamda表达式(二) 表达式树快速入门 本节导读: 认识表达式树(Expression Tree),学习使用Lambda创建表达式树,解析表达式树. 学习 ...

  6. 【AngularJS】—— 4 表达式

    前面了解了AngularJS的基本用法,这里就跟着PDF一起学习下表达式的相关内容. 在AngularJS中的表达式,与js中并不完全相同. 首先它的表达式要放在{{}}才能使用,其次相对于javas ...

  7. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  8. AngularJS进阶(二十七)实现二维码信息的集成思路

    AngularJS实现二维码信息的集成思路        赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,与君共勉!      注:点击此处进行知识充电 ...

  9. AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定

    AngularJS与单选框及多选框的双向动态绑定      赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <in ...

随机推荐

  1. JMeterPlugins插件监听器学习－监听器

    JMeterPlugins插件监听器学习-监听器 1.jp@gc - Actiive Threads Over Time:不同时间活动用户数量展示(图表)2.jp@gc - AutoStop List ...

  2. golang 自定义json解析

    在实际开发中,经常会遇到需要定制json编解码的情况. 比如,按照指定的格式输出json字符串, 又比如,根据条件决定是否在最后的json字符串中显示或者不显示某些字段. 如果希望自己定义对象的编码和 ...

  3. 开源自然语言处理工具包hanlp中CRF分词实现详解

     CRF简介 CRF是序列标注场景中常用的模型,比HMM能利用更多的特征,比MEMM更能抵抗标记偏置的问题. [gerative-discriminative.png] CRF训练 这类耗时的任务,还 ...

  4. 虚拟机怎么发送ctrl+alt+delete组合键

    相信各位It的从业人员都遇到过安装了虚拟机搭建测试环境,可是在使用windows服务器版本操作系统的时候.出现要求发送ctrl+alt+delete组合键,才能登陆操作系统.为此咗嚛提供3个方法给您解 ...

  5. 【java】public,private和protected

    public表示紧随其后的元素对任何人都是可用的,而private这个关键字表示除类型创建者和类型内部方法之外的任何人都不能访问的元素.protected关键字与private作用相当,差别仅在于继承 ...

  6. mysql 1267 error

    CREATE TABLE a (id VARCHAR(32)) DEFAULT CHARSET = utf8 COLLATE utf8_general_ci:INSERT INTO a(id) VAL ...

  7. XBOX360更新游戏封皮（FSD自制系统）

    第一步,请记下上图左下角的IP地址第二步,打开电脑IE浏览器,输入“第二步”你记下的IP地址“回车”然后,就如下图所示了. 输入账号:f3http 密码:f3http 进入,然后你就进到你的360 F ...

  8. 生成OSIDAAuto.OPCServer失败

    来源:https://pisquare.osisoft.com/message/13441 A failuare of generating OSIDAAuto.OPCServer dorislipe ...

  9. mysql 事务学习

    1.事务 逻辑上的一组操作,组成这组操作的各个逻辑单元要么一起成功,要么一起失败. 2.事务特性 原子性:强调事务的不可分割.一致性:强调的是事务的执行的前后,数据的完整性要保持一致.隔离性:一个事务 ...

  10. 如果遇到Hadoop集群正常，MapReduce作业运行出现错误，如何来查看作业运行日志（图文详解）

    不多说,直接上干货! 这个时候我们可以进入logs下的userlogs 备注:userlogs目录下有很多个以往运行的作业,我选择最新的最大编号的作业,就是我们当前运行作业的日志.然后找到stderr ...