下面的代码是用图像和文本动态显示 li 的列表。
<ul class="presale">
<li ng-repeat="(k,v) in value | groupBy : 'presales_name'" ng-click="showData(k.split(' ').join('-').replace('(','').replace(')',''), $index)">
<div class="imgDiv">
<img src="/images/phones/sub-family/xs/{{k.split(' ').join('-').replace('(','').replace(')','-').toLowerCase()}}.png">
</div>
<p><a>{{k}}</a></p>
</li>
</ul>
$scope.showData = function (item, index) {
}
我需要添加一个代码来显示用户选择的特定 li 的背景颜色，然后隐藏先前选择的 li 的背景颜色。
最佳答案
你可以做如下的事情
JS file
var app = angular.module('app', []);
app.controller('NavigationController', function ($scope)
{
// Must use a wrapper object, otherwise "activeItem" won't work
$scope.states = {};
$scope.states.activeItem = 'item1';
$scope.items = [{
id: 'item1',
title: 'Home'
}, {
id: 'item2',
title: 'Public Rooms'
}, {
id: 'item3',
title: 'My Rooms'
}];
});
HTML file
<body ng-app="app">
<div ng:controller="NavigationController">
<p>
Your active menu item: <span class="highlightOne">{{states.activeItem}}</span>
</p>
<ul class="navigation">
<li ng-repeat="item in items" class="item" ng-class="{'active': item.id == states.activeItem}" ng-click="states.activeItem=item.id">{{item.title}}</li>
</ul>
</div>
</body>
CSS file
ul.navigation li
{
background: #f6f6f6;
padding: 10px;
margin: 2px 0;
display: block;
cursor: pointer;
}
ul.navigation li.active
{
background: blue;
color: #f6f6f6;
display: block;
padding: 10px;
}
.highlightOne
{
background: orange;
font-size: 125%;
margin: 5px;
padding: 5px;
}
.navigation
{
display: block;
background: #666;
margin: 10px;
padding: 10px;
width: 40%;
}
p
{
margin: 10px 0 20px;
}
代码引用，请勾选“https://codepen.io/SkiWether/pen/lzjAq”。
关于jquery - 在从 ng-repeat 生成的 li 上显示背景色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50060011/