添加和使用angularJs删除类的NG-点击 [英] adding and removing classes in angularJs using ng-click
本文介绍了添加和使用angularJs删除类的NG-点击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在想办法如何添加类ngClick。我已经上传了我的code到plunker 点击这里。纵观角文档，我想不出确切的方式，它应该做的事。下面是我的code片段。有人可以指导我在正确的方向
＆LT; DIV NG秀=可见性NG-CLASS ={'选择'：$指数==的selectedIndex}级=块＆GT;＆LT; / DIV＆GT ;
控制器
VAR应用= angular.module（MyApp的，[]）;
app.controller（subNavController功能（$范围）{ $ scope.toggle =功能（）{
$ scope.isVisible =！ $ scope.isVisible;
}; $ scope.isVisible = FALSE;
}）;
解决方案
您只需要一个变量绑定到指令纳克级，并将其从控制器改变。这里有一个例子：
\r
\r\r
\r VAR应用= angular.module（AP，[]）;\r
\r
app.controller（CON，函数（$范围）{\r
$ scope.class =红;\r
$ scope.changeClass =功能（）{\r
如果（$ scope.class ===红）\r
$ scope.class =蓝色;\r
其他\r
$ scope.class =红;\r
};\r
}）; \r
.red {\r
颜色：红色;\r
}\r
\r
。蓝色{\r
颜色：蓝色;\r
} \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT;机身NG-应用=APNG-控制器=CON＆GT;\r
＆LT; DIV纳克级=类＆GT; {{}类}＆LT; / DIV＆GT;\r
＆LT;按钮NG点击=changeClass（）＆GT;更改类和LT; /按钮＆GT;\r
＆LT; /身体GT; \r
下面是工作的例子的jsfiddle
I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below is a snippet of my code. Can someone guide me in the right direction
<div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>
Controller
var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){
$scope.toggle = function (){
$scope.isVisible = ! $scope.isVisible;
};
$scope.isVisible = false;
});
解决方案
You just need to bind a variable into the directive "ng-class" and change it from the controller. Here is a example:
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>
Here is the example working on jsFiddle
这篇关于添加和使用angularJs删除类的NG-点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
