web-dev-qa-db-ja.com

コントローラーを介してanglejsのクラスを変更する

Anglejsとコントローラーを使用してinput [type = button]のクラスを動的に変更するのを手伝ってください。

app.controller('anodekeypadcntrl',function($scope){
        
        
        $scope.clickTwentyFour = function(event){
          In this function I need to highlight the button (adding the .active class to it)      
        };
                                    
});
<div class="keypadcontainer" ng-controller="anodekeypadcntrl as child">
  ------
  <input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton"
        ng-click="clickTwentyFour($event)" />
  -------------
</div>
htmlcssangularjstwitter-bootstrap
10
Anusha Sajeendran

これには ngClass を使用できます。マークアップで次のようなことを行うだけです。

<input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton"
ng-click="clickTwentyFour($event)" ng-class="myDynamicClass" />

このようにして、myDynamicClassをCSSクラスを含む単一の文字列またはコントローラーから直接の文字列の配列に設定できます。

// controller code
$scope.myDynamicClass = 'some-css-class';

これはHTMLに追加されます。 ngClass のドキュメントを見ると、クラスを返す関数をアタッチしたり、条件をアタッチしてHTMLに直接クラスを記述したりすることができます。

16
Dan Moldovan

クラスを追加したい場合は、これを試してください：

var myEl = angular.element( document.querySelector( '#twentyFour' ) );
myEl.addClass('active');

querySelectorの内容を必要なIDに置き換えることができます。

5
Deepak Mani

ng-classを使用して、divorボタンなどにクラスを動的に追加できます。

ここにあなたのコードで動作するプランカーがあります

http://embed.plnkr.co/rzS8GV975BHRk83xhsPx/preview

お役に立てれば

2
Alhuck A