ng-show和ng-hide的进阶应用
Posted 云遮夏靥
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ng-show和ng-hide的进阶应用相关的知识,希望对你有一定的参考价值。
在数据列表渲染的时候,我们可能不仅有一层数据,可能是三级甚至更多,如果我们要显示或者隐藏对应的数据,那么就需要给数据进行子scope的绑定。如下
<div ng-app="demoApp">
<table ng-controller="mainCtrl">
<tr ng-repeat="app in apps" ng-model="app" ng-hide="app.hidden">
<td>
{{app.text}}
</td>
<td>
<button ng-click="underCarriage($index)">hide</button>
</td>
</tr>
</table>
</div>
app=angular.module(‘demoApp‘,[]); app.controller(‘mainCtrl‘,function($scope){ $scope.apps=[{text:"app1",hidden:false}, {text:"app2",hidden:false}, {text:"app3",hidden:false}]; $scope.underCarriage=function(id){ $scope.apps[id].hidden=true; }; });
多级应当按照此方式同步进行。
另,ng-show和ng-hide无需自己设置display属性,如果自己设置了,将失去作用,小坑一个,坑的我不行。。。
以上是关于ng-show和ng-hide的进阶应用的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Angular ui 路由器 ng-hide 和 ng-show 视图?