首页 > 其他 > 详细

ng-show和ng-hide的进阶应用

时间:2017-04-12 13:15:41      阅读:205      评论:0      收藏:0      [点我收藏+]

在数据列表渲染的时候,我们可能不仅有一层数据,可能是三级甚至更多,如果我们要显示或者隐藏对应的数据,那么就需要给数据进行子scope的绑定。如下

html

<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>

javascript

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的进阶应用

原文:http://www.cnblogs.com/yunzhexiaye/p/6698326.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!