Question

我列出了一些与ngrepeat一起显示的内容，单击这些内容时，会生成与所选元素相关的其他内容列表。我的目的是让点击元素的背景改变颜色，以便显示它被选中。我的问题是，当我选择另一个元素时，它们都显示为已选中。这是我的代码：

<div class="breakdownRow pointer" ng-class="{bSelection: selection}" ng-click="selection=true" ng-repeat="m in masterList">
    <span class="areaTag">{{m.area}}</span>
    <span class="storeNumTag" ng-repeat="v in m.valueList track by $index">{{v.toLocaleString()}} </span>
</div>

如前所述，第一次点击活动效果很好。 bSelection是我的css类，它改变了背景颜色。我的问题再一次是，一旦点击了另一个元素，前一个元素本身就不会“取消选择”。

问题：当选择了另一个元素时，如何取消给某个元素的类，以便一次只显示一个元素？

Answer 1

在具体元素中设置和检查选择：

<div class="breakdownRow pointer" ng-class="{bSelection: m.selection}" ng-click="m.selection=true" ng-repeat="m in masterList">

<强>更新

仅选择一个 - 保存不是bool，而是选择索引元素。 ng-repeat创建自己的范围，依次点击为每个项目创建的选择。您可以使用 $ parent 在父作用域中创建一个选择。

<div class="breakdownRow pointer" ng-class="{bSelection: $parent.selection==$index}" ng-click="$parent.selection=$index" ng-repeat="m in masterList">

angular.module('app', [])
  .controller('controller', function($scope) {
    $scope.masterList = [1, 2, 3, 4, 5, 6, 7, 8];
  });

.breakdownRow {
  border: 1px solid black;
  width: 100px;
  height: 100px;
}
.bSelection {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<div ng-app="app" ng-controller="controller">
  <div class="breakdownRow pointer" ng-class="{bSelection: $parent.selection==$index}" ng-click="$parent.selection=$index" ng-repeat="m in masterList">
    {{m}}
  </div>
</div>

AngularJS：如何在选择另一个时取消选择范围

1 个答案: