javascript - AngularJS操作ng-show指令-php教程-PHP中文网

javascript - AngularJS操作ng-show指令

php中文网

发布： 2016-06-06 20:14:37

原创

1262人浏览过

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

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

立即学习“Java免费学习笔记（深入）”；

代码：

AutoGLM沉思

智谱AI推出的具备深度研究和自主执行能力的AI智能体

239

查看详情

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

登录后复制

回复内容：

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

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

立即学习“Java免费学习笔记（深入）”；

代码：

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

登录后复制

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

登录后复制

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

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

登录后复制

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 这哥们儿的回答应该是这个意思：

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

登录后复制

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