7

我是 Angular Js 的新手。我需要在其单击事件上向元素添加一个类。我尝试了以下代码。但它不起作用。

<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 ？怎么做？

4

4 回答 4

36

您可以通过 $event 点击

<p ng-click='selectMe($event)'>{{data.name}}</p>

//code:
$scope.selectMe = function (event){
   $(event.target).addClass('active');
}
于 2013-10-21T12:00:28.477 回答
7

Angular 的方式（实际上是 MVVM）是通过点击事件更新模型，然后根据模型进行绘制，例如：

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>
于 2013-10-21T12:03:33.743 回答
6

我知道这个问题已经有了答案，但是当我意识到选择的最佳答案（我已经在我的一些代码中实现）与 AngularJS 文档不一致时，我感到很震惊。

根据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 作为键，布尔值作为值。这通过 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;
  }
};

你可以在这里查看我的 codepen 。

我还有另一个版本，它从控制器中删除了所有这些逻辑，只留下了变量定义，但我认为这可能超出了这个问题的范围。(codepen.io/joshwhatk/pen/bwmid)

希望这可以帮助。

于 2014-06-04T14:58:59.057 回答
4

我知道这是一个古老的问题，但只是遇到了它，并认为这里给出的任何问题都有一个更简单的答案：

<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 的更新版本

于 2016-02-29T10:47:56.427 回答