Angular 常用ng指令详解
2015-08-19 20:57
609 查看
详解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}} </li> </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内的代码--> $scope.fontcolor=30;
方法二:
<div ng-style="fontcolor">Hello World !!!</div> <!--声明在scope内的代码--> $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 都是一些看过即懂的东西,非常显而易见。在这里就不再赘述。
相关文章推荐
- angularJS 中$attrs方法使用指南
- 简述AngularJS相关的一些编程思想
- AngularJS的一些基本样式初窥
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- angularjs中的e2e测试实例
- 简介AngularJS中使用factory和service的方法
- AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
- 举例讲解AngularJS中的模块
- 使用AngularJS处理单选框和复选框的简单方法
- AngularJS的内置过滤器详解
- 详解AngularJS中自定义指令的使用
- 使用Raygun来自动追踪AngularJS中的异常
- angularJS结合canvas画图例子
- 教你用AngularJS框架一行JS代码实现控件验证效果
- AngularJS入门教程(零):引导程序
- AngularJS基础学习笔记之简单介绍
- 简介AngularJS的HTML DOM支持情况