angular 学习笔记 (2) -- ng指令

今天介绍一些常用的ng指令吧。

一：ng-bind和ng-clock。

ng-bind：将data数据绑定到当前元素的 innerHTML，相当于初始化吧。

ng-clock:主要用来避免HTML模板显示引起的不希望的闪烁效应，其实ng-bind也有同样的效果。

解决闪烁问题还可以把引包放在head里面，先加载angular.js。

1 
2     
3     
4   

 1  
14 
15 
16   {{'hello world'}}
17 

二：ng-repeat：从集合中的每个项目实例化一个模板。想微信小程序wx.for那样。

 1 
 2     

 3         

 4             {{item.name}}   {{item.age}}year
 5         
 6     
 7 
 8 
 9 

三：ng-class：通过数据绑定表达所有要添加的类的表达式来动态地设置HTML元素上的CSS类（输入名字首字母添加类名，样式变红色）

 2       
 6 
 7 
 8   
 9     
10     

11       

//red后面判断是true还是false，true则添加该类名

　　　　　　　　　　{{item}}
　　　　　　
12     
13   
14 
15 
16   

四：ng-show：显示；

　　ng-hide:隐藏；

　　ng-if:是否存在

　　ng-swich:可以处理比较复杂的ng-class判断。

 1  
 2     1
 3     2
 4     3
 5   
 6   switch="selected">
 7     switch-when="1">
 8       你选择的是1
 9     
10     switch-when="2">
11       你选择的是2
12     
13     switch-when="3">
14       你选择的是3
15     
16     switch-default>
17       你什么都没选
18     
19   

好了，今天就学到这里，通过两天的学习，深深的感受到ng在双向数据绑定的方面的功能强大。体验不错！！！

转载于:https://www.cnblogs.com/weihuan/p/7049294.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！