ng-clickでng-repeatの中の他の要素を切り替える

Question

ng-classとng-clickを使用してクラスを適用しようとしていますが、これは選択した要素に対してうまくいきますが、このクラスを他の要素でどのように切り替えることができますか？
の向上説明：
現在の行動：EL素子の
クリックして、クラスが適用されます。
他の要素のClik、この要素もクラス適用されます。
希望の動作：
適用されるクラスをクリックします。
他の要素 - クラスが削除されました。

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

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

Answer 2

コントローラ範囲でフラグを維持し、

マークアップ

$scope.selected = { index: undefined }; 

ng-class上にそれを使用しています

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