我是Angular Js的新手。我需要在click事件的元素上添加一个类。我尝试了以下代码。但它没有用。
<html>
<head>
<style>
.active{color:red;}
</style>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/angular.min.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div ng-repeat="data in datas">
<p ng-click='selectMe()'>{{data.name}}</p>
</div>
<script>
var app = angular.module('MyApp',[]);
app.controller('MyController',function($scope){
$scope.datas = [{name:"first"},{name:"second"}];
$scope.selectMe = function (){
$(this).addClass('active');
}
});
</script>
</body>
</html>
此代码有什么问题?是否有必要使用ng-class?怎么做?
答案 0 :(得分:33)
您可以传递$ event以点击
<p ng-click='selectMe($event)'>{{data.name}}</p>
//code:
$scope.selectMe = function (event){
$(event.target).addClass('active');
}
答案 1 :(得分:8)
实现此目的的Angular方式(实际上是MVVM)是通过click事件更新模型,然后根据模型进行绘制,例如:
app.controller('MyController',function($scope){
$scope.datas = [{name:"first", selected:false},{name:"second",selected:false}];
$scope.selectMe = function(data) {
var i;
for( i=0; i < $scope.datas.length; i++ ) {
$scope.datas[i].selected = false;
}
data.selected = true;
};
}
HTML:
<div ng-repeat="data in datas">
<p ng-click='selectMe(data)' ng-class="{selected: data.selected}>{{data.name}}</p>
</div>
答案 2 :(得分:7)
我知道这个问题已经有了答案,但当我意识到所选择的最佳答案(我已在某些代码中实现)与AngularJS文档不一致时,我感到很震惊。
请勿使用控制器:
- 操纵DOM - 控制器应仅包含业务逻辑。将任何表示逻辑放入控制器会显着影响其可测试性。 Angular对大多数情况和指令进行数据绑定以封装手动DOM操作。
huston007的答案很有效,但是,它没有遵循这个建议。
将此作为您的数据输入:
$scope.peeps = {
'0': {
'id': 0,
'first_name': 'Tony',
'last_name': 'Martin'
},
'1': {
'id': 1,
'first_name': 'Gerald',
'last_name': 'Johanssen'
},
'2': {
'id': 2,
'first_name': 'Bobby',
'last_name': 'Talksalot'
}
};
这是你的HTML:
<ul>
<li ng-repeat="peep in peeps"
ng-click="addOrRemoveClassFromMe(peep.id)"
ng-class="{selected: selectedPeeps[peep.id]}">
{{peep.first_name}} {{peep.last_name}}
</li>
</ul>
我建议的解决方案使用一个对象数组,其中人的id为关键字,booleon为值。这通过ngClass指令链接到DOM中。
//-- create the selected peeps array
$scope.selectedPeeps = {};
//-- add the id to an array with a true-ey value
$scope.addOrRemoveClassFromMe = function(id) {
//-- Set selected peeps as true/false
if($scope.selectedPeeps[id]) {
$scope.selectedPeeps[id] = false;
} else {
$scope.selectedPeeps[id] = true;
}
};
您可以查看我的代码集here。
我还有另一个版本从控制器中删除所有这些逻辑,只留下变量定义,但我认为这可能超出了这个问题的范围。 (codepen.io/joshwhatk/pen/bwmid)
希望这有帮助。
答案 3 :(得分:3)
我知道这是一个古老的问题,但刚刚遇到它,并认为这里给出的任何答案都有一个更简单的答案:
<div ng-repeat="data in datas">
<p ng-click="active=!active"
ng-class="{'active': active}">{{data.name}}</p>
</div>
除了创建datas
数组之外,控制器中不需要代码。这是因为active
变量是在ng-repeat创建的每个div
的子范围内而不是在控制器的范围内创建的。
我已经创建了@joshwhatk的codepen here
的更新版本答案 4 :(得分:-1)
最好的方法之一是
<div ng-repeat="data in datas">
<p ng-click="selectMe();clicked = true" ng-class="{active: clicked}" >{{data.name}}</p>
</div>
不需要控制器中的任何代码