ng-clickを使用してangularJsでクラスを追加および削除する

97

私はngClickでクラスを追加する方法を働かせようとしています。plunkerにコードをアップロードしましたここをクリックしてください。角度のあるドキュメントを見ると、正確な方法がわかりません。以下は私のコードのスニペットです。誰かが正しい方向に案内してくれますか

 <div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>

コントローラ

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });
javascript  angularjs  angularjs-ng-click  ng-class 
— NewKidOnTheBlock
ソース
デモや説明から、目的が何であるか明確ではありません。メニューを切り替えようとしているように見えますが、デモでメニューリンクのみを切り替えているのはなぜですか？
— charlietfl 2013
— Prashobh

回答:

110

変数を「ng-class」ディレクティブにバインドし、コントローラーから変更するだけです。これを行う方法の例を次に示します。

var app = angular.module("ap",[]);

app.controller("con",function($scope){
  $scope.class = "red";
  $scope.changeClass = function(){
    if ($scope.class === "red")
      $scope.class = "blue";
    else
      $scope.class = "red";
  };
});
.red{
  color:red;
}

.blue{
  color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
  <div ng-class="class">{{class}}</div>
  <button ng-click="changeClass()">Change Class</button>    
</body>
スニペットを展開

これはjsFiddleで作業する例です

— ゲヌニェス
ソース
29
class予約語です。className代わりに使用してください。YUIコンパイラはこれを縮小できません。
— オーランド
7
このコードを同じビューの複数のdivに使用する場合はどうなりますか？このコードは、すべてのdivのクラスを実際に変更します。選択したクリックされたアイテムにのみクラスを適用する方法
— xzegga
ありがとう。[クラスを変更]ボタンをクリックしたときに何が起きているかを完全に理解するには、コンソールを開いてコードを表示します。
— fidev 2015
1
このSOスレッドもご覧ください。質問のスコープとリンク100％が、それでも余分な有用な情報を提供していない可能性があります：stackoverflow.com/questions/31047094/...
— ビラル
144

ここで、コード内の" "クラスを動的に追加または削除したいと思います。activeng-click

<ul ng-init="selectedTab = 'users'">
   <li ng-class="{'active':selectedTab === 'users'}" ng-click="selectedTab = 'users'"><a href="#users" >Users</a></li>
   <li ng-class="{'active':selectedTab === 'items'}" ng-click="selectedTab = 'items'"><a href="#items" >Items</a></li>
</ul>
— かわいい悪魔086
ソース
13
ng-initの場合は-1。AngularJSのドキュメントによるとThe only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
— Mike Grabowski 2014
2
これはそれを行う方法の基本的な機能を示すためだけなので、私は「ここ」のコントローラ部分を避けています...
— cutedevil086
1
ドキュメントに記載されていない `ng-class =" {'active'：true} [selectedTab === 'users'] "`の構文を使用することもできます
— Cody
なぜこれがうまくいくのか分かりません。私はAngular 1.3.8で非常によく似たことをしていますが、条件付きクラスは、別の要素をクリックしても要素から削除されません。他の要素は再レンダリングされないため、私は推測します。では、なぜこれが機能したのでしょうか。Angularの古いバージョンは、単一の要素がクリックされたときにリスト全体を再構築しましたか？
— Matt Molnar
誰か他の人を助けるかもしれないので、私はこれを追加しています。angular-ui-routerには、ユーザーが指定する機能などがあります。URIで表される状態を作成します。各状態には、1つ以上のコントローラー、1つ以上のテンプレート、およびそれらにバインドされた1つ以上のビューを含めることができます。リンクはui-srefディレクティブを使用して生成されます。ui-sref-activeディレクティブは、状態がアクティブなときに特定のクラスをその要素にバインドします。 Angular UI-Routerドキュメンテーション
— deadbabykitten
12

ディレクティブだけでこれを行うには、シンプルでクリーンな方法があります。

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>
— 職人
ソース
8

以前のクラスを削除して新しいクラスを追加したい場合は、ディレクティブでそれを行うこともできます

    .directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                if(element.attr("class") == "glyphicon glyphicon-pencil") {
                    element.removeClass("glyphicon glyphicon-pencil");
                    element.addClass(attrs.toggleClass);
                } else {
                    element.removeClass("glyphicon glyphicon-ok");
                    element.addClass("glyphicon glyphicon-pencil");
                }
            });
        }
    };
});

そしてあなたのテンプレートで：

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>
— 士蘭
ソース
タグとディレクティブにアイコンの名前があるのはなぜですか？
— ロバートジョンストーン、
ばかげたコメントです。Angularで何かを行う方法を説明しているときは、おそらくその場所ではないことに同意しますが、これは完全に正当なことです
— bert
angular.element（ 'glyphicon glyphicon-pencil）.removeClass（' glyphicon glyphicon-pencil '）？angular.elementは、jqueryにおける$のかなり角張ったjqLit​​eバージョンです。この関数を呼び出すサービスまたはディレクティブを作成し、コンストラクターでdeletedClassesとaddedClassesを渡すだけです
— MattE
それは本当ですが、私は単純な角のjsを使用しようとしました。
— Shilan
7

あなたはそれを正確に持っています、あなたがしなければならないすべてはあなたのng-クリックでselectedIndexを設定することです。

ng-click="selectedIndex = 1"

これは、ng-viewを変更するボタンのセットを実装し、現在選択されているビューのボタンを強調表示する方法です。

<div id="sidebar" ng-init="partial = 'main'">
    <div class="routeBtn" ng-class="{selected:partial=='main'}" ng-click="router('main')"><span>Main</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view1'}" ng-click="router('view1')"><span>Resume</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view2'}" ng-click="router('view2')"><span>Code</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view3'}" ng-click="router('view3')"><span>Game</span></div>
  </div>

これは私のコントローラーにあります。

$scope.router = function(endpoint) {
    $location.path("/" + ($scope.partial = endpoint));
};
— ザックアーガイル
ソース
4 

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });
<div ng-show="isVisible" ng-class="{'active':isVisible}" class="block"></div>
スニペットを展開

— ジェイプラカシュシン
ソース
2

上記のザックアーガイルの提案を使用してこれを取得しました。

CSS：

.active {
    background-position: 0 -46px !important;
}

HTML：

<button ng-click="satisfaction = 'VeryHappy'" ng-class="{active:satisfaction == 'VeryHappy'}">
    <img src="images/VeryHappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Happy'" ng-class="{active:satisfaction == 'Happy'}">
    <img src="images/Happy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Indifferent'" ng-class="{active:satisfaction == 'Indifferent'}">
    <img src="images/Indifferent.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Unhappy'" ng-class="{active:satisfaction == 'Unhappy'}">
    <img src="images/Unhappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'VeryUnhappy'" ng-class="{active:satisfaction == 'VeryUnhappy'}">
    <img src="images/VeryUnhappy.png" style="height:24px;" />
</button>
— アドリアン・デヴェル
ソース
2

クラスを追加および削除するためのロジックがコントローラーで発生するような懸念事項の分離を好む場合は、これを行うことができます

コントローラ

 (function() {
    angular.module('MyApp', []).controller('MyController', MyController);

    function MyController() {
      var vm = this;
      vm.tab = 0;

      vm.setTab = function(val) {
          vm.tab = val;
       };
      vm.toggleClass = function(val) {
          return val === vm.tab;
           };
        }
    })();

HTML

<div ng-app="MyApp">
  <ul class="" ng-controller="MyController as myCtrl">
    <li ng-click="myCtrl.setTab(0)" ng-class="{'highlighted':myCtrl.toggleClass(0)}">One</li>
    <li ng-click="myCtrl.setTab(1)" ng-class="{'highlighted':myCtrl.toggleClass(1)}">Two</li>
    <li ng-click="myCtrl.setTab(2)" ng-class="{'highlighted':myCtrl.toggleClass(2)}">Three</li>
   <li ng-click="myCtrl.setTab(3)" ng-class="{'highlighted':myCtrl.toggleClass(3)}">Four</li>
 </ul>

CSS 

.highlighted {
   background-color: green;
   color: white;
}
— デニス・ワニョニ
ソース
-1

誰もがこれを作るのがどれほど複雑か信じられません。これは実際には非常に簡単です。これをhtmlに貼り付けるだけです（ディレクティブは不要です。/コントローラーの変更は必要ありません-"bg-info"はブートストラップクラスです）：

<div class="form-group col-md-12">
    <div ng-class="{'bg-info':     (!transport_type)}"    ng-click="transport_type=false">CARS</div>
    <div ng-class="{'bg-info': transport_type=='TRAINS'}" ng-click="transport_type='TRAINS'">TRAINS</div>
    <div ng-class="{'bg-info': transport_type=='PLANES'}" ng-click="transport_type='PLANES'">PLANES</div>
</div>
— ジョン・パロット
ソース
-1

リアクティブフォーム-

HTMLファイル

<div class="col-sm-2">
  <button type="button"  [class]= "btn_class"  id="b1" (click)="changeMe()">{{ btn_label }}</button>
</div>
スニペットを展開

TSファイル 

changeMe() {
  switch (this.btn_label) {
    case 'Yes ': this.btn_label = 'Custom' ;
    this.btn_class = 'btn btn-danger btn-lg btn-block';
    break;
    case 'Custom': this.btn_label = ' No ' ;
    this.btn_class = 'btn btn-success btn-lg btn-block';
    break;
    case ' No ': this.btn_label = 'Yes ';
      this.btn_class = 'btn btn-primary btn-lg btn-block';
      break;
  }
スニペットを展開

— Mシン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.