Diğer öğeleri ng-yinelemesinde ng-yinelemede geçiş yapın

Question

Sınıfı ng sınıfı ve ng-tıklama kullanarak ve bu öğe için seçili öğe için iyi olmaya çalışıyorum, ancak bu öğeyi diğer öğeler arasında nasıl değiştirebilirim?
Geliştirilmiş açıklama:
Güncel davranış: elelement üzerine
tıklayın, sınıf uyguladı.
Clik diğer öğe üzerinde, bu öğe aynı zamanda uygulanan sınıf.
İstenilen davranış:
Öğe üzerine tıklayın, uygulanan sınıf.
Diğer öğe sınıfı kaldırıldı.

<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

sorun selected diğer öğeleri tarafından paylaşılmayan bir izole edilmiş kapsamı içinde olan, bir.

bir kolay çözeltisi kullanarak dizin

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

kontrol kapsamındaki bayrağı korumak ve ng-class

$scope.selected = { index: undefined }; 

İşaretleme üzerine bunu kullanmak

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