Angular - - 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="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>
  </div>

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl", testCtrl);
    function testCtrl() {
        var vm = this;
        vm.select = ["tpl-one", "tpl-two","tpl-three" ];
        vm.tpl = vm.select[0];
    };
  }());

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 {
     /* this is just another form of hiding an element */
     display: block!important;
     position: absolute;
     top: -9999px;
     left: -9999px;
   }

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

时间: 2024-10-08 20:34:31

Angular - - ngIf、ngSwitch、ngHide/ngShow的相关文章

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

野兽的 ng api 学习 - - ngIf.ngSwitch.ngHide/ngShow 在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ngIf ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作. 格式:ng-if=“value” value:表达式  返回结果为boolean类型. 使用代码:

AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch

在Angular的原生指令中有这几个指令用来控制元素的展示与否,ng-show/ng-hide/ng-if和ng-switch. 在angular性能优化中,我们也常常会用到它. 我们看下他们的区别. 其中ng-show和ng-hide是一样的,只不过ng-show是满足条件就展示,ng-hide是满足条件就隐藏,下面就不再提到ng-hide. ng-show ng-show接收的一个bool值,当为true的时候就会被触发去展示DOM节点.当ng-show的值为false的时候,在DOM节点上

野兽的Angular Api 学习、翻译及理解 - - ngReadonly、ngSelected、ngDisabled

野兽的 ng api 学习 - - ngReadonly.ngSelected.ngDisabled ngReadonly 该指令将input,textarea等文本输入设置为只读. HTML规范不允许浏览器保存类似readonly的布尔值属性.如果我们将一个Angular的插入值表达式转换为这样的属性,那么当浏览器删除该属性时,绑定信息就会丢失.这个指令不被浏览器删除,并且提供了一个永久性的可靠的地方来存储绑定信息. 格式:ng-readonly=“value” value:表达式   结果为

野兽的Angular Api 学习、翻译及理解 - - ngHref、ngSrc、ngCopy/ngCut/ngPaste

野兽的 ng api 学习 - - ngHref.ngSrc.ngCopy/ngCut/ngPaste ngHref 在Angular程序没完成改变链接上用{{hash}}方式绑定的href值的时候,当用户点击该链接会跳到一个错误的页面. 格式:ng-href=”value” value:表达式. 使用代码: <a ng-href="http://www.xxxxx.com">点击进入xxxxx网站</a> 如果href绑定的url是动态绑定(从就是代码中绑定到

野兽的Angular Api 学习、翻译及理解 - - ngChange、ngChecked、ngClick、ngDblclick

野兽的 ng api 学习 -- ngChange.ngChecked.ngClick.ngDblclick ngChange 当用户更改输入时,执行给定的表达式.表达式是立即进行执行的,这个和javascript的onChange事件的只有在触发事件的变化结束的时候执行不同. 格式:ng-change=”value” value: 表达式. 使用代码: <div ng-app="Demo"> <div ng-controller="testCtrl&quo

angular之$watch、$watchGroup、$watchCollection

1,原型:$watch: function(watchExp, listener, objectEquality, prettyPrintExpression){}: 2,参数:watchExp(必须):{(function()|string)},可以字符串表达式,也可以带当前scope为参数的函数 - `string`: Evaluated as {@link guide/expression expression} - `function(scope)`: called with curre

野兽的Angular Api 学习、翻译及理解 - - $anchorScroll、$controller、$document

野兽的ng api学习 -- $anchorScroll.$controller.$document $anchorScroll 根据HTML5的规则,当调用这个函数时,它检查当前的url的hash值并且滚动到相应的元素. 监听$location.hash()并且滚动到url指定的锚点的地方.可以通过$anchorScrollProvider.disableAutoScrolling()禁用. 依赖:$window   $location   $rootScope 使用:$anchorScrol

野兽的Angular Api 学习、翻译及理解 - - ngList、ngRepeat、ngModelOptions

野兽的 ng api 学习 - - ngList.ngRepeat.ngModelOptions ngList 在文本输入的分隔的字符串和字符串数组间做转换,可以是一个固定的字符串分隔符(默认逗号)或正则表达式. 格式:ng-list=”value” value:表达式  通过这个值分隔字符串. 使用代码: <div ng-app="Demo"> <div ng-controller="demoCtrl"> <input ng-mode

野兽的Angular Api 学习、翻译及理解 - - ngCloak、ngController、ngInit、ngModel

野兽的 ng api 学习 -- ngCloak.ngController.ngInit.ngModel ngCloak ngCloak指令是为了防止Angular应用在启动加载的时候html模板将会被短暂性的展示.这个指令可以用来避免由HTML模板显示造成不良的闪烁效果. 格式: ng-cloak   class=“ng-cloak“ 使用代码: <div ng-cloak>{{'Hello World'}}</div> <div class="ng-cloak&