在 ng-click 上切换 ng-repeat 中的其他元素答案

【问题标题】：Toggle other elements inside ng-repeat on ng-click在 ng-click 上切换 ng-repeat 中的其他元素
【发布时间】：2016-07-16 13:33:11
【问题描述】：

我正在尝试通过使用 ng-class 和 ng-click 来应用类，这对于选定的元素工作正常，但是如何在其他元素中切换该类？
改进的描述：
当前行为：
单击 elelement，应用类。
单击另一个元素，该元素也应用了类。
期望的行为：
单击元素，应用类。
其他元素 - 已删除类。

<div ng-repeat="element in ngModel | orderBy:'Field_Order'" class='elementForm' ng-hide="element.IsDeleted">
    <div layout="row" style="width:100%" class="container" ng-mouseover="hovering=true" ng-mouseleave="hovering=false" flex ng-click="selected = !selected">
        <div class="hover-space" ng-class="{'hoveredFormElement':hovering, 'selected':selected}" flex="2" ></div>
        ....
    </div>
</div>

【问题讨论】：

你能创建一个提琴手链接并解释你到底想要什么..
添加一些你尝试过的代码
或许能帮到你stackoverflow.com/questions/36185017/…

标签： javascript angularjs

【解决方案1】：

问题是，selected 在一个不被其他项目共享的隔离范围内。

使用索引的一个简单解决方案是

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope) {
  $scope.selected = -1;
  $scope.ngModel = [{
    i: 1
  }, {
    i: 2
  }, {
    i: 3
  }, {
    i: 4
  }];
})

.hoveredFormElement {
  color: green;
}
.selected {
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app">
  <div ng-controller="AppController">
    {{selected}}
    <div ng-repeat="element in ngModel | orderBy:'Field_Order'" class='elementForm' ng-hide="element.IsDeleted">
      <div layout="row" style="width:100%" class="container" ng-mouseover="hovering=true" ng-mouseleave="hovering=false" flex ng-click="$parent.selected = $parent.selected == $index ? -1 : $index">
        <div class="hover-space" ng-class="{'hoveredFormElement':hovering, 'selected':selected == $index}" flex="2">{{element}}</div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

在控制器范围内维护标志并在ng-class上使用它

$scope.selected = { index: undefined };

标记

<div ng-repeat="element in ngModel | orderBy:'Field_Order'" class='elementForm' ng-hide="element.IsDeleted">
    <div layout="row" style="width:100%" class="container" 
      ng-mouseover="hovering = true" 
      ng-mouseleave="hovering = false" 
      flex ng-click="selected.index = !selected">
        <div class="hover-space" 
         ng-class="{'hoveredFormElement':hovering , 'selected':selected.index }" flex="2" ></div>
        ....
    </div>
</div>

【讨论】：