码迷,mamicode.com
首页 > Windows程序 > 详细

野兽的Angular Api 学习、翻译及理解 - - ngIf、ngSwitch、ngHide/ngShow

时间:2015-11-14 23:13:38      阅读:415      评论:0      收藏:0      [点我收藏+]

标签:

野兽的 ng api 学习 - - ngIf、ngSwitch、ngHide/ngShow

在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆。

这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断。

 

ngIf

ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作。

格式:ng-if=“value”

value:表达式  返回结果为boolean类型。

使用代码:

            <input type="button" value="show/hide" ng-click="show = !show;" />

            <div ng-if="show">Hello World</div>

这里做了个对Hello World 所在的div的显示/隐藏效果。但是如果你打开浏览器开发工具去审查元素,会发现这个div是被移除和添加的,只留下一个注释“<!-- ngIf: show -->”在div所在的地方。这个需要和下面的ngShow/ngHide做个区分。也就是说这个指令对DOM的操作是移除出/添加进DOM树了。

 

ngSwitch

ngSwitch指令可以根据表达式的结果在模板上按条件切换DOM结构。元素内使用ngSwitch而没使用ngSwitchWhen或者ngSwitchDefault指令的将会被保存在模板中。

格式:ng-switch  on=“expression” ng-switch-default  ng-switch-when=“value”

expression: 表达式,返回判断的条件是否成立的boolean值。

value:设置的条件

使用代码:

    <div ng-app="Demo">

        <div ng-controller="demoCtrl">

            <select ng-model="tpl" ng-options="i for i in select">

                <option value="0">请选择模板</option>

            </select>

            <div ng-switch on="tpl">

                <p ng-switch-default>tpl-one</p>

                <p ng-switch-when="tpl-two">tpl-two</p>

                <p ng-switch-when="tpl-three">tpl-three</p>

            </div>

        </div>

    </div>

    <script>

        angular.module("Demo", [])

        .controller("demoCtrl", ["$scope", function ($scope) {

            $scope.select = ["tpl-one", "tpl-two","tpl-three" ];

            $scope.tpl = $scope.select[0];

        }])

</script>

ngSwitch根据表达式的成立与否添加对应的内容到写好的HTML位置,而这个位置当表达式为false时也是个注释就像:“<!-- ngSwitchWhen: tpl-two -->”。这是第二个模板绑定的位置,当表达式满足第二个模板的条件,那么这里就会被第二个模板的HTML代替并显示到页面。

 

ngHide/ngShow

NgHide/ngShow指令显示或隐藏指定的THML元素。元素的显示隐藏是根据元素上ng-hide的css样式添加删除实现的。

格式:ng-hide=”value”   ng-show=”value”

value:表达式 结果为boolean类型。

使用代码:

            <input type="button" value="show/hide" ng-click="show = !show;" />

            <div ng-show="show">Hello</div>

            <div ng-hide="show">World</div>

ngShow和ngHide相反。这里把ng-hide的css样式写在下面吧:

 .ng-hide {
 /&#42; this is just another form of hiding an element &#42;/
 display: block!important;
 position: absolute;
 top: -9999px;
 left: -9999px;
 }

难得的周末,再次吐槽每周上六天班真的真的好累....  明天可以多睡会了,那么待会就再写一篇吧~哈哈    下篇写完就把ng-xxx类的写完了,剩下的都好多,学习进程也好慢...  到现在写了整个自定义指令的和缓存服务的和scope的一些方法函数。

野兽的Angular Api 学习、翻译及理解 - - ngIf、ngSwitch、ngHide/ngShow

标签:

原文地址:http://www.cnblogs.com/ys-ys/p/4965139.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!