AngularJS-study一些逻辑指令

2017-02-08 本文已影响0人 Victor细节

ng-if

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

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

<body ng-controller="MainCtrl as ctrl">
    <!-- 点击事件调用changePage方法并赋值，
    点击page1时赋值为true，点击page1时赋值为false -->
    <input type="button" ng-click="ctrl.changePage(true);" value="page1">
    <input type="button" ng-click="ctrl.changePage(false);" value="page2">
    <!-- 当flag值为true是显示page1，值为false时显示page2 -->
    <h2 ng-if="ctrl.flag">page1</h2>
    <h2 ng-if="!ctrl.flag">page2</h2>

    <script type="text/javascript">
        angular.module("myApp",[])
            .controller("MainCtrl",[function(){
                var self = this;
                // 初始显示第一个页面
                self.flag = true;
                self.changePage = function (flag) {
                    self.flag = flag;
                } 
            }])
    </script>
</body>

效果展示

GIF.gif

ng-switch

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

Paste_Image.png

<body ng-controller="MyCtrl as ctrl">
    <!-- 通过changePage()这个函数的传参，来给pageName变量赋值 -->
    <input type="button" ng-click="ctrl.changePage('page1')" value="page1">
    <input type="button" ng-click="ctrl.changePage('page2')" value="page2">
    <input type="button" ng-click="ctrl.changePage('page3')" value="page3">

    <!-- ng-switch on表示要执行分支的条件变量 -->
    <div ng-switch on="ctrl.pageName">
        <!-- 通过匹配pageName的值来显示哪个页面
        如果pageName的值为page1，则显示页面1 -->
        <h2 ng-switch-when="page1">页面1</h2>
        <h2 ng-switch-when="page2">页面2</h2>
        <h2 ng-switch-when="page3">页面3</h2>
        <h2 ng-switch-default>其它页面</h2>
    </div>

    <script type="text/javascript">
        angular.module("myApp",[])
            .controller("MyCtrl",[function(){
                var self = this;
                // 默认页面为page1
                self.pageName = "page1";
                self.changePage = function (pageName) {
                    self.pageName = pageName;
                }
            }])
    </script>
</body>

效果展示

GIF.gif

ng-repeat

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

Paste_Image.png

遍历字符串<code>char in ctrl.str</code>
<li ng-repeat="a in 'hello' track by $index">{{ a }}</li>
遍历普通数组<code>item in ctrl.arr</code>
<li ng-repeat="item in ctrl.names">{{ item }}</li>
遍历对象<code>value in ctrl.obj或者(key,value) in ctrl.obj</code>
<li ng-repeat="item in ctrl.person">{{ item }}</li>
<li ng-repeat="(key,value) in ctrl.person"
ng-bind-template='{{ key + "=>" + value}}'></li>
注意： 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代码。

<tr ng-repeat-start="move in ctrl.movies ">
    <td > {{ move.title }} </td>
</tr>
<tr ng-repeat-end>
    <td>{{ move.name }}</td>
</tr>

数据结构

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

效果展示

Paste_Image.png

AngularJS-study一些逻辑指令

猜你喜欢

热点阅读