Question

我在ng-repeat块中有这个：

<a href='#' ng-model="collapsed{{$index}}" ng-click="collapsed{{$index}}=!collapsed{{$index}}">{{item.type}}</a>
  <div ng-show="collapsed{{$index}}">
    {{item.type}}
  </div>

我需要让每次迭代都跟踪它自己的崩溃状态。我试图做上述各种错误。 ng-model并不像{{}}那样，ng-click似乎也没有。我没有太多运气也试过[$ index]。

有关正确方法的任何想法吗？

Answer 1

如果你把它放到控制器中，我认为跟踪崩溃状态会更加清晰：

使用Javascript：

app.controller('collapseCtrl', ['$scope', function($scope){
    $scope.collapsed = true;
    $scope.toggle = function(){
        $scope.collapsed = !$scope.collapsed;
    };
}]);

HTML：

<div ng-controller="collapseCtrl">
    <a href='#' ng-click="toggle()">{{item.type}}</a>
    <div ng-show="collapsed">
      {{item.type}}
    </div>
</div>

Answer 2

在你的控制器中，你可以尝试引入一组布尔值，它可以保持列表中每个项目的崩溃状态。

// if every one of them starts off in a collapsed state, all booleans are true
$scope.collapses = [true, true, true, ...];

然后就变成了

<a ng-click="toggle($index)">{{item.type}}</a>
<div ng-hide="collapses[$index]">{{item.type}}</div>

至于toggle()功能：

$scope.toggle = function(index) { collapses[index] = !collapses[index]; };

使用AngularJS设置动态单击和模型表达式

2 个答案: