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

AngularJS: How to unselect a span when selecting another

本文关键字：选择 取消 另一个 AngularJS      更新时间：2023-09-26

我有一个用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类，它的背景颜色发生了变化。同样，我的问题是，一旦点击另一个元素，前一个元素本身就不会"取消选择"

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

设置并检查混凝土元素中的选择：

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

相关文章：