Переключить другие элементы внутри ng-repeat на ng-click

Question

Я пытаюсь применить класс с помощью ng-class и ng-click и этот рабочий тон для выбранного элемента, но как я могу переключить этот класс в других элементах?
Улучшенное описание:
Текущее поведение:
Нажмите на elelement, класс применяется.
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

Поддерживать флаг в области контроллера и использовать его на 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>