angular学习笔记

1.ng-app=""; 指令初始化一个 AngularJS 应用程序,定义AngularJS的使用范围;

2.ng-init="变量=值;变量=值"  定义初始变量值,若有多个,分号隔开;

      例如:ng-init="persion={first:1,last:2}"  ->  {{persion.first}} -> 1;

                ng-init="persion=1;cost=5"      ->    {{persion}} -> 1

                ng-init="persion=[1,15,19,2,40]"  -> {{persion[2]}}  -> 15

3.ng-model="变量"; 定义变量名,把元素值(比如输入域的值)绑定到应用程序

4.ng-bind="变量"  绑定 HTML 元素到应用程序数据,获取该变量的数据。这里的变量就是第3的变量,用{{}}来获取对应的变量值

    ng-bind:变量(html标签无效)

   ng-bind-html:变量(html标签有效)

   ng-bind-template:表达式(html标签无效)

5.ng-change 规定在内容改变时要执行的表达式

  1⃣️指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

  2⃣️指令需要搭配ng-model指令使用。

  3⃣️指令不会覆盖原生的 onchange 事件, 如果触发该事件,ngg-change表达式与原生的 onchange 事件都会执行。

  4⃣️事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作。

  5⃣️事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。

过滤器 -可以使用一个管道字符(|)添加到表达式和指令中。

1.currency 格式化数字为货币格式

      {{250 | currency}}  -> $250.00

      {{250 | currency:" ¥ "}} ->¥250.00

2.filter  从数组项中选择一个子集

      {{[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},    {"age":44,"id":12,"name":"test abc"}]|filter:{'name':'iphone'}}} ->[{"age":20,"id":10,"name":"iphone"}]

3.lowercase 格式化字符串为小写

        {{ "LOWER" | uppercase }} -> lower

4.uppercase 格式化字符串为大写

       {{ "lower" | uppercase }} -> LOWER

5.orderBy  根据某个表达式排列数组

     {{ [{"age": 20,"id": 10,"name": "iphone"},

      {"age": 12,"id": 11,"name": "sunm xing"},

       {"age": 44,"id": 12,"name": "test abc"}

      ] | filter:{'name':'iphone'} }}

      -> 

       [{"age":44,"id":12,"name":"test abc"},{"age":12,"id":11,"name":"sunm xing"},{"age":20,"id":10,"name":"iphone"}]

6.date 格式化

      {{1490161945000|date:"yyyy-MM-dd HH:mm:ss"}}// 2017-03-22 13:52:25

7.number 格式化(保留两位小数)

      {{ 3.1415926 | number:2}}  -> 3.14

8.limitTo 截取

      {{"123456" | limitTo:3 }}  -> 123

你可能感兴趣的:(angular学习笔记)