欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

javascript - AngularJS操作ng-show指令

程序员文章站 2022-04-13 11:49:27
...
需求:页面有一个使用ng-repeat指令生成的列表,当点击一个item时,就隐藏之。

问题:请问如何在ng-click的回调中操作当前item的ng-show的值,而不影响其他item?

代码:


回复内容:

需求:页面有一个使用ng-repeat指令生成的列表,当点击一个item时,就隐藏之。

问题:请问如何在ng-click的回调中操作当前item的ng-show的值,而不影响其他item?

代码:


设置一个hidden属性,结合列表的$index即可。

  
  • {{item.title}}
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;
        }
    })

之所以要把hidden设置为对象而非原始值,是因为ng-repeat有独立的作用域,直接在ng-repeat的作用域上修改原始值父控制器上的值是不会改变的;需要借助引用类型,如对象或数组,才能保证修改保存到父级控制器。

http://jsbin.com/modute/edit?html,js,output

@onelove 这哥们儿的回答应该是这个意思:


这样虽然能实现需求,但是问题很大,就是把控制视图的show和数据耦合在一起了,这样不好吧?还有什么办法么?