AngularJS-study一些逻辑指令

ng-if

ng-if指令基于{表达式}来移除或重建DOM树的一部分。如果赋给 ng-if的表达式计算结果为假，元素会从DOM移除，其它情况会复制一份元素插入到DOM中。

ngIf 不同于 ngShow 和 ngHide ， ngIf 是在DOM中完全移除或重建元素，而不是通过 display css 属性改变可见。一种常见的情况是，这种差异表现在依靠一个元素在DOM的位置使用CSS选择器时，例如 :first-child 或 :last-child 伪类。

    
    
    
    
    
page1
    
page2

    

效果展示

GIF.gif

ng-switch

ngSwitch指令用于根据域表达式在你的模板上按条件切换DOM结构。元素内使用ngSwitch而非ngSwitchWhen或ngSwitchDefault指令的地方会保留在模板中的位置。

Paste_Image.png

    
    
    
    

    
    

        
        
页面1
        
页面2
        
页面3
        
其它页面
    

    

效果展示

GIF.gif

ng-repeat

ngRepeat指令为集合中的每项实例化一个模板。每个模板的实例拥有自己的域，使用循环变量指向当前集合项上，$index指向当前项的索引或键值。

Paste_Image.png

• 遍历字符串char in ctrl.str
  
• {{ a }}
• 遍历普通数组item in ctrl.arr
  
• {{ item }}
• 遍历对象value in ctrl.obj或者(key,value) in ctrl.obj
  
• {{ item }}


• ng-bind-template='{{ key + "=>" + value}}'>

注意： track by $index解决遍历重复元素报错问题

指定重复的开始和结束点

ng-repeat-start 和ng-repeat-end

为了解决重复元素序列只有一个父元素的情况，ngRepeat (不同于其它ng指令)支持扩展重复范围，通过使用ng-repeat-start 和 ng-repeat-end分别定义明确的开始和结束点。ng-repeat-start 指令工作方法类似ng-repeat，但是会重复从标签定义本身位置开始到ng-repeat-end定义位置之间的所有HTML代码。

     {{ move.title }} 


    {{ move.name }}

数据结构

self.movies = [
    { title : 'NO.1', name : '西游记'   },
    { title : 'NO.2', name : '瑜伽功夫' },
    { title : 'NO.3', name : '乘风破浪' }
]

效果展示

Paste_Image.png