Angular ng-重复元素。在视图更改时重置切换开关

Question

我有一个由 ng-repeat 生成的列表，它迭代了一个对象数组。对于创建的每个元素，我都有一个 ng-click 来切换 showDetails-body。像这样：

<li class="list-group-item" ng-repeat-start="order in orderList " 
     ng-click="order.showDetails = !order.showDetails"

当我更改整个 window 的状态（即更改视图）时，如何将特定元素切换为假？问题是当我在应用程序中更改视图时，会显示带有详细信息的列表元素 "body"。我需要重置那个特定的元素。可能吗？

Answer 1

使用 ng-repeat 代替 ng-repeat-start

<body ng-controller="MainCtrl">
 <li class="list-group-item" ng-repeat="order in orderList " 
  ng-click="order.showDetails = !order.showDetails">{{order.name}}
  {{order.showDetails}}</li>
</body>

让控制者

app.controller('MainCtrl', function($scope) {
      $scope.orderList = [{"name":"John","showDetails":false},
           {"name":"Doe","showDetails":false}
      ];
});

工作的 plunker https://plnkr.co/edit/Yc5zU7VRP41qWQfP0IsC?p=preview

Answer 2

 $scope.collapseListItem = function(){
        $scope.orderList.forEach(function(element) {
            element.showDetails=false;
        });
    }

这解决了我的问题。更改视图时，我在视图中使用 ng-click() 调用此函数。

Angular ng-重复元素。在视图更改时重置切换开关

Angular ng-repeat element. Reset toggle-switch on view-change

html

html-lists

angularjs

angularjs-ng-repeat