<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myapp',[]);
m1.controller('Aaa',function($scope){
$scope.colors = [{
'id':'1',
'name':'red'
},{
'id':'2',
'name':'green'
},{
'id':'3',
'name':'blue'
}];
});
</script>
</head>
<body>
<p ng-controller="Aaa">
<ul>
<li ng-repeat="color in colors">{{color.name}}</li>
</ul>
</p>
</body>
</html>
需要用到id对应起来吗？
给我你的怀抱2017-05-15 16:54:53
不用楼上那么复杂。
<ul>
<li ng-class="{red : color.active}" ng-click="color.active = !color.active" ng-repeat="color in Texture">{{color.value}}</li>
</ul>
ringa_lee2017-05-15 16:54:53
题主应该使用angular的directive来实现这个需求.
结果: http://output.jsbin.com/rolobakaya
javascriptm1.directive('toggleClass', function(){ return { restrict: 'A', scope: { toggleClass: '@' }, link: function($scope, $element){ $element.on('click', function(){ $element.toggleClass($scope.toggleClass); }); } }; });
html<li toggle-class="classname"></li>
高洛峰2017-05-15 16:54:53
我的思路是：
<li ng-class="{active: currentId == color.id}" ng-repeat="color in colors">{{color.name}}</li>
然后定义一个ng-click并在里面修改$scope.currentId