Maison >développement back-end >tutoriel php >javascript - AngularJS操作ng-show指令
需求:页面有一个使用ng-repeat
指令生成的列表,当点击一个item时,就隐藏之。
问题:请问如何在ng-click
的回调中操作当前item的ng-show
的值,而不影响其他item?
代码:
<code class="html"> <ul ng-controller="listCtrl"> <li ng-repeat="item in items" ng-click="delete()" ng-show="show"> <span ng-bind="item.title"></span> <span ng-bind="item.price"></span> </li> </ul> <script> var myApp = angular.module('myApp',[]); myApp.controller('listCtrl',function($scope){ var items = [{title:"title1",price:120},{title:"title2",price:23},{title:"title3",price:32234}] $scope.items = items; // $scope.show = "true"; $scope.delete = function(item){ // $scope.show = "false" } }) </script> </code>
需求:页面有一个使用ng-repeat
指令生成的列表,当点击一个item时,就隐藏之。
问题:请问如何在ng-click
的回调中操作当前item的ng-show
的值,而不影响其他item?
代码:
<code class="html"> <ul ng-controller="listCtrl"> <li ng-repeat="item in items" ng-click="delete()" ng-show="show"> <span ng-bind="item.title"></span> <span ng-bind="item.price"></span> </li> </ul> <script> var myApp = angular.module('myApp',[]); myApp.controller('listCtrl',function($scope){ var items = [{title:"title1",price:120},{title:"title2",price:23},{title:"title3",price:32234}] $scope.items = items; // $scope.show = "true"; $scope.delete = function(item){ // $scope.show = "false" } }) </script> </code>
<code><ul ng-controller="listCtrl"> <li ng-repeat="item in items" ng-click="delete()" ng-show="item.show"> <span ng-bind="item.title"></span> <span ng-bind="item.price"></span> </li> </ul> <script> var myApp = angular.module('myApp',[]); myApp.controller('listCtrl',function($scope){ var items = [{title:"title1",price:120},{title:"title2",price:23},{title:"title3",price:32234}] $scope.items = items; // $scope.show = "true"; $scope.delete = function(item){ $scope.item.show = "false" } }) </script> </code>
设置一个hidden属性,结合列表的$index
即可。
<code> <ul ng-controller="listCtrl"> <li ng-repeat="item in items" ng-click="change($index)" ng-hide="hidden.value == $index"> <span>{{item.title}}</span> <span ng-bind="item.price"></span> </li> </ul></code>
<code>angular.module('myApp',[]) .controller('listCtrl',function($scope){ var items = [{title:"title1",price:120},{title:"title2",price:23},{title:"title3",price:32234}] $scope.items = items; $scope.hidden = {value: null} // $scope.show = "true"; $scope.change = function(i) { $scope.hidden.value = i; } })</code>
之所以要把hidden设置为对象而非原始值,是因为ng-repeat
有独立的作用域,直接在ng-repeat
的作用域上修改原始值父控制器上的值是不会改变的;需要借助引用类型,如对象或数组,才能保证修改保存到父级控制器。
http://jsbin.com/modute/edit?html,js,output
@onelove 这哥们儿的回答应该是这个意思:
<code class="html"> <ul ng-controller="listCtrl"> <li ng-repeat="item in items" ng-click="delete(item)" ng-show="item.show"> <span ng-bind="item.title"></span> <span ng-bind="item.price"></span> </li> </ul> <script type="text/javascript"> var myApp = angular.module('myApp',[]); myApp.controller('listCtrl',function($scope){ var items = [{title:"title1",price:120,show:true},{title:"title2",price:23,show:true},{title:"title3",price:32234,show:true}] $scope.items = items; $scope.delete = function(item){ item.show = false; } }) </script> </code>
这样虽然能实现需求,但是问题很大,就是把控制视图的show
和数据耦合在一起了,这样不好吧?还有什么办法么?