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 に答える
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.io/joshwhatk/ペン/bwmid)

お役に立てれば。

于 2014-06-04T14:58:59.057 に答える