使用ng-click在angularJ中添加和删除类
使用ng-click在angularJ中添加和删除类
提问于 2013-12-09 07:03:16
我正在尝试如何使用ngClick添加一个类。我已经把我的代码上传到plunker Click here上了。看了一下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;
});回答 8
Stack Overflow用户
回答已采纳
发布于 2013-12-09 07:41:06
您只需要将一个变量绑定到指令"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上工作的示例
Stack Overflow用户
发布于 2016-08-04 10:50:13
有一种简单明了的方法，只需使用指令就可以做到这一点。
<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>Stack Overflow用户
发布于 2015-05-26 20:34:52
如果要删除以前的类并添加新类，也可以在指令中执行此操作
.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20460369
复制相关文章
相似问题