如何根据AngularJs中的点击更改项目的背景颜色

我已经使用ng-repeat列出了多个<div>。如何根据AngularJs中的点击更改项目的背景颜色

当我点击一个<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>

来源

2016-09-06 Serhiy

什么蓝色的背景是什么意思？这是一种项目选择或什么？ – enkryptor

你试过了什么？ –

是的这是一种项目选择 – Serhiy

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>

来源

2016-09-06 10:48:36

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>

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

CSS

.selected { 
    background-color: blue; 
}

来源

2016-09-06 10:44:22

您应该为每个div分配一个保存最后点击的div ID的点击功能。然后你必须使用ng-class指令为div设置一个蓝色背景类，如果他的id是当前的。

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

来源

2016-09-06 10:48:11

如何根据AngularJs中的点击更改项目的背景颜色

回答

相关问题