AngularJS：选择另一个跨度时如何取消选择

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

更新

只选择一个 - 保存不是布尔值，而是索引选定的元素。 ng-repeat 创建自己的范围，所以点击为每个项目创建的selection。您可以使用 $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>