Как изменить цвет фона элемента на основе нажатия в AngularJs

Question

Как изменить цвет фона элемента на основе нажатия в AngularJs

0

Я перечислил число <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>

Serhiy 06 сен. 2016, в 13:00

Источник

0

Что должен означать синий фон? Это что-то вроде выбора предметов или как?
enkryptor 06 сен. 2016, в 10:41
0

Что вы пробовали?
Abhishek Pandey 06 сен. 2016, в 10:43
0

да, это выбор предмета
Serhiy 06 сен. 2016, в 10:56
0

@Serhiy попробуй мой ответ stackoverflow.com/a/39347164/6608101
Mohit Tanwani 06 сен. 2016, в 10:59

Показать ещё 2 комментария

Теги:

html

angularjs

css

angularjs-ng-repeat

onfocus

3 ответа

1

Вы должны назначить каждую функцию 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>

Jon_Snow 06 сен. 2016, в 09:25

1

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

Sa E Chowdary 06 сен. 2016, в 09:04

Ещё вопросы

Что должен означать синий фон? Это что-то вроде выбора предметов или как?
@Serhiy попробуй мой ответ stackoverflow.com/a/39347164/6608101

Mohit Tanwani · Accepted Answer · 2016-09-06T08-45-00.000Z

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>