Angular常用ng指令详解

我们依次从使用频率高到低来，重要性大小来说明各种指令。
1.ng-repeat
1.1一般用法

 <ul><li ng-repeat="char in [{'alphabet': 'K'},{'alphabet': 'A'},{'alphabet': 'V'},{'alphabet': 'L'},{'alphabet': 'E'},{'alphabet': 'Z'}] " >{{char.alphabet}}</li>
</ul>

这是一个用于展示的示例程序。在真正的代码开发中，我们一般都用一个单独声明的一个变量来存储这些需要的repeat 的数据。例如：

var chars= [{'alphabet': 'K'},{'alphabet': 'A'},{'alphabet': 'V'},{'alphabet': 'L'}, {'alphabet': 'E'}, {'alphabet': 'Z'}] ;

然后在html文件中这么写:

<ul><li ng-repeat = "char in chars">{{char.alphabet}}</li>
</ul>

这里的char 相当于一个循环变量，类似于C++中的迭代器，直接就是chars数据对象里面的一组数据。跟一般的数据绑定相似，可以直接进行数据访问。
1.2进阶用法
现在，我们就要用到ng-repeat里面提供的东西了;

$index $first $middle $last

<ul>
<li ng-repeat = "char in chars">
{{$index}}{{char.alphabet}}
</li>
</ul>

在html内就可以直接使用了，通过再加上ng-class 或者 ng-style 指令可以实现表单奇偶行背景交替出现的效果了。
另外，repeat 是根据内容hash出来的一个唯一id进行遍历，如果你拥有重复的多组重复数据，可以通过Index进行遍历。

<ul><li ng-repeat ="char in chars track  by $index">{{char.alphabet}}</ul>

2.ng-click
这是一个非常普通的angular 点击事件入口，可以跟其它的指令配合使用，例如ng-repeat,就能实现一些比较简单的功能。

 <ul><li ng-repeat =" char in chars"><a ng-click ="vote($index)">{{char.alphabet}}</a></li></ul>

这样可以直接把数组对应的index传入函数中，也可以传入任何在Scope已经声明过的变量。

3. ng-class
这是一个非常酷的内置指令，通过这个，你可以实现通过在scope内声明的变量自由变换css的class,而你只需动动手指头改变变量内容即可：

<style>.red{background-color:red;}.blue{background-color:blue;}</style><div ng-controller = "CurTimeController"><button ng-click = "getCurrentSecond()"> Get Time! </button><p ng-class ={ red: x%2==0, blue; x%2!=0}"> Number is : {{x}}</p></div>
.controller('CurTimeController',function($scope){$scope.getCurrentSecond = function(){$scope.x =new Date().getSeconds();};
})

4.ng-style
ng-style 是用来控制你具体的css class内各种属性的值。基本上有两种方法来实现这一点;
方法一：

< div ng-style = "{ 'font-size':'{{fontcolor}}px'}">hello world!!!</div>$scope.fontcolor =30;

方法二:

<div ng-style = "fontcolor">Hello Word !!!</div>
$scope.fontcolor = {'font -size':'30px'};

5 ng-checked
ng-checked 顾名思义就是给哪些拥有checked属性的组件例如 checkbox 绑定上变量，如果为true就是选中，若为false，就是未选中

<input type="checkbox" ng-checked="someProperty"
ng-init="someProperty = true" ng-model="someProperty">

代码非常简单，但是我要提醒大家，这个绑定是单项绑定。也就是说，如果someProperty初始声明值为true，用ng-checked 绑定了这个属性，在页面上你如何点击这个checkbox，这个someProperty的值恒为true。除非你在scope内手动将someProperty的值变成false，那么在浏览器上，对应的checkbox就显示为未选中状态。
那么如何解决这个问题呢？
恕我愚钝，我并没有看到什么其他很好的解决办法，唯一的办法就是再给这个checkbox绑定上click事件，自己手动修改变量值。

除了以上几个指令，其他例如 ng-if 、 ng-show 、 ng-src 、 ng-href 都是一些看过即懂的东西，非常显而易见。在这里就不再赘述。

Angular常用ng指令详解相关推荐

Angular 常用ng指令详解
详解Angular ng内置指令我们依次从使用频率高到低来,重要性大小来说明各种指令. 1.ng-repeat 1.1 一般用法 <ul><li ng-repeat="c ...
angular的自定义指令---详解
1.angualr指令在angualr自己里面有许多丰富的指令,但都是平时所常见的,但对于自己所需要的可能有所欠缺,所以自己可能会摒弃原声指令,自己封装更为健壮灵活的指令: 其实angular里面的 ...
GSM模块_常用AT指令详解
基础查询命令: AT //返回OK,表示模块串口工作正常 ATI //查询版本,厂家,型号信息 ATE0 //返回OK,关闭回显 AT+CSQ //查看信号强度(在20以上为稳 ...
Angular ng-model指令详解
Angular ng-model指令详解声明将输入域的值与 AngularJS 创建的变量绑定双向数据绑定表单验证自定义类样式常用应用状态声明本文根据菜鸟教程整理 http://www ...
arm-linux-ld中的参数,arm-linux-ld指令详解
arm-linux-ld指令详解我们对每个c或者汇编文件进行单独编译,但是不去连接,生成很多.o 的文件,这些.o文件首先是分散的,我们首先要考虑的如何组合起来:其次,这些.o文件存在相互调用的关系 ...
pragma comment的使用 pragma预处理指令详解
pragma comment的使用 pragma预处理指令详解 #pragma comment( comment-type [,"commentstring"] ) 该宏放置一个注 ...
#pragma comment和#pragma 预处理指令详解
该宏放置一个注释到对象文件或者可执行文件. 例如,#pragma comment(lib,"Ws2_32.lib")表示链接Ws2_32.lib这个库. 和在工程设置里写上链入 ...
Javascript常用的设计模式详解
Javascript常用的设计模式详解阅读目录一:理解工厂模式二:理解单体模式三:理解模块模式四:理解代理模式五:理解职责链模式六:命令模式的理解: 七:模板方法模式八:理解javas ...
#pragma预处理指令详解
#pragma预处理指令详解在所有的预处理指令中,#Pragma指令可能是最复杂的了,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#pragma指令对每个编译器给出了一个方法,在保 ...

Angular常用ng指令详解

Angular常用ng指令详解相关推荐

最新文章

热门文章