AngularJs 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是被移除和添加的，只留下一个注释“”在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" ng-controller="testCtrl as ctrl">

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

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

      </select>

      <div ng-switch on="ctrl.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>

  (function () {

    angular.module("Demo", [])

    .controller("testCtrl", testCtrl);

    function testCtrl() {

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

        this.tpl = this.select[0];

    };

  }());

ngSwitch根据表达式的成立与否添加对应的内容到写好的HTML位置，而这个位置当表达式为false时也是个注释就像：“”。这是第二个模板绑定的位置，当表达式满足第二个模板的条件，那么这里就会被第二个模板的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 {

     /* this is just another form of hiding an element */

     display: block!important;

     position: absolute;

     top: -9999px;

     left: -9999px;

   }

巴特西

AngularJs ngIf、ngSwitch、ngHide/ngShow

最新文章

热门文章