Я перечислил несколько <div> с помощью ng-repeat.

Когда я нажимаю на один <div> (div1) цвет фона становится синим, а если я нажимаю на другой div (div2), div1-background-color становится белым, как и в начале, а div2-background-color становится синим .
Вот мой html:

<div  ng-repeat="folder in vm.folders track by $index" >
    <span>{{folder.name}}</span>
</div>
1
Serhiy 6 Сен 2016 в 13:25

3 ответа

Лучший ответ
var app = angular.module("ap",[]);

app.controller("con",function($scope){
   $scope.changeIndex = function(index){
    $scope.selected = index;
  }
});
.blue{
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
<div ng-repeat="n in [10, 20, 30, 40] track by $index">
  <div ng-class="{blue: selected==$index}" ng-click="changeIndex($index)">{{n}}</div>
  </div>
</body>
1
Mohit Tanwani 6 Сен 2016 в 10:48

html

<div  ng-repeat="folder in vm.folders track by $index" ng-click="setSelected($index)" ng-class="{selected : $index === selectedfolder }">
    <span>{{folder.name}}</span>
</div>

js

  $scope.selectedfolder = null;
    $scope.setSelected = function(selectedfolder ) {
       $scope.selectedfolder = selectedfolder ;
    }

css

.selected {
  background-color: blue;
}
1
Sa E Chowdary 6 Сен 2016 в 10:44

Вы должны назначить каждому div функцию при нажатии, которая сохраняет последние идентификаторы div, по которым щелкнули. Затем вы должны использовать директиву ng-class, чтобы установить класс синего фона для div, если его идентификатор является текущим.

$scope.setCurrent = function(index){
   $scope.currentId = index;
}

<div ng-repeat="folder in vm.folders track by $index" ng-click="setCurrent($index)" ng-class="{selected : currentId == $index}" >
    <span>{{folder.name}}</span>
</div>
1
Jon_Snow 6 Сен 2016 в 10:48