在其click事件上向元素添加类

时间:2013-10-21 11:52:14

标签: angularjs angularjs-ng-click ng-class

我是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?怎么做?

5 个答案:

答案 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文档不一致时,我感到很震惊。

根据AngularJS Documentation

  

请勿使用控制器:

     
      
  • 操纵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>

不需要控制器中的任何代码

More Info