BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] ng-clickを使ったangularJsのクラスの追加と削除

2023-01-18 16:08:52

質問

私は、ngClickでクラスを追加する方法を試しています。私は私のコードをplunkerにアップロードしました。 ここをクリック . angularのドキュメントを見ると、それが行われるべき正確な方法がわかりません。以下は、私のコードのスニペットです。誰かが正しい方向に私を導くことができます 

 <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;
    });

どのように解決するのですか？

ディレクティブの "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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します