AngularJs切换纳克级的NG-点击 [英] AngularJs toggle ng-class ng-click
本文介绍了AngularJs切换纳克级的NG-点击的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
谁能提供正确的方法来此的jsfiddle:
Can anyone offer the correct approach to this JSFiddle:
<style>
.red #btn{
background-color:red;
}
.blue #btn{
background-color:blue;
}
</style>
<body ng-app="ap" ng-controller="con">
<button id="btn" ng-click="changeClass()">Change Class</button>
</body>
<script>
var app = angular.module("ap",[]);
app.controller("con",function($scope){
$scope.class = "red";
$scope.changeClass = function(){
if ($scope.class === "red #btn")
$scope.class = "blue #btn";
else
$scope.class = "red #btn";
};
});
</script>
JsFiddle Link
我试图通过的.class和放大器来改变类的元素; #ID。
I am trying to change the class of an element via .class & #ID.
在此先感谢
感谢tymeJV,新的jsfiddle:
推荐答案
正确的方法将使用纳克级
基于切换变量,考虑:
The correct approach would be using ng-class
based on a toggle variable, consider:
CSS:
.red {
color: red;
}
JS:
$scope.toggle = false;
HTML
<button id="btn" ng-click="toggle = !toggle" ng-class="{'red' : toggle}">Change Class</button>
纳克级
的工作原理是(在上述中,红)的基础上,如果变量(切换)是真正
或假
。
ng-class
works by assigning the referenced class (in the above, "red") based on if the variable ("toggle") is true
or false
.
这篇关于AngularJs切换纳克级的NG-点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文