如何根据 AngularJs 中的点击更改项目的背景颜色
How to change background color of an item based on the click in AngularJs
我列出了一些使用 ng-repeat 的 <div>
。
当我点击一个 <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>
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;
}
您应该为每个 div 分配一个点击功能,以保存最后点击的 div ID。然后你必须使用 ng-class 指令将蓝色背景 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>
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>
我列出了一些使用 ng-repeat 的 <div>
。
当我点击一个 <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>
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;
}
您应该为每个 div 分配一个点击功能,以保存最后点击的 div ID。然后你必须使用 ng-class 指令将蓝色背景 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>
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>