使用ng-click添加和删除angularJs中的类
我正在尝试如何使用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; });
您只需要将一个variables绑定到指令“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>
我想在我的代码中dynamic添加或删除 “ active ”类，在这里我做了什么。
<ul ng-init="selectedTab = 'users'"> <li ng-class="{'active':selectedTab === 'users'}" ng-click="selectedTab = 'users'"><a href="#users" >Users</a></li> <li ng-class="{'active':selectedTab === 'items'}" ng-click="selectedTab = 'items'"><a href="#items" >Items</a></li> </ul>
你有完全正确的，你所要做的就是在ng-click中设置selectedIndex。
ng-click="selectedIndex = 1"
下面是我如何实现一组改变ng-view的button，并突出显示当前选定视图的button。
<div id="sidebar" ng-init="partial = 'main'"> <div class="routeBtn" ng-class="{selected:partial=='main'}" ng-click="router('main')"><span>Main</span></div> <div class="routeBtn" ng-class="{selected:partial=='view1'}" ng-click="router('view1')"><span>Resume</span></div> <div class="routeBtn" ng-class="{selected:partial=='view2'}" ng-click="router('view2')"><span>Code</span></div> <div class="routeBtn" ng-class="{selected:partial=='view3'}" ng-click="router('view3')"><span>Game</span></div> </div>
这在我的控制器。
$scope.router = function(endpoint) { $location.path("/" + ($scope.partial = endpoint)); };
你也可以在指令中做到这一点，如果你想删除以前的类，并添加一个新的类
.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>
var app = angular.module("MyApp", []); app.controller("subNavController", function ($scope){ $scope.toggle = function (){ $scope.isVisible = ! $scope.isVisible; }; $scope.isVisible = false; });
<div ng-show="isVisible" ng-class="{'active':isVisible}" class="block"></div>
有一个简单而干净的方法，只用指令来做到这一点。
<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>
我用上面的Zack Argyle的build议来得到这个，我觉得很优雅：
CSS：
.active { background-position: 0 -46px !important; }
HTML：
<button ng-click="satisfaction = 'VeryHappy'" ng-class="{active:satisfaction == 'VeryHappy'}"> <img src="images/VeryHappy.png" style="height:24px;" /> </button> <button ng-click="satisfaction = 'Happy'" ng-class="{active:satisfaction == 'Happy'}"> <img src="images/Happy.png" style="height:24px;" /> </button> <button ng-click="satisfaction = 'Indifferent'" ng-class="{active:satisfaction == 'Indifferent'}"> <img src="images/Indifferent.png" style="height:24px;" /> </button> <button ng-click="satisfaction = 'Unhappy'" ng-class="{active:satisfaction == 'Unhappy'}"> <img src="images/Unhappy.png" style="height:24px;" /> </button> <button ng-click="satisfaction = 'VeryUnhappy'" ng-class="{active:satisfaction == 'VeryUnhappy'}"> <img src="images/VeryUnhappy.png" style="height:24px;" /> </button>
如果您喜欢分离关注点，以便在控制器上添加和删除类的逻辑，则可以执行此操作
调节器
(function() { angular.module('MyApp', []).controller('MyController', MyController); function MyController() { var vm = this; vm.tab = 0; vm.setTab = function(val) { vm.tab = val; }; vm.toggleClass = function(val) { return val === vm.tab; }; } })();
HTML
<div ng-app="MyApp"> <ul class="" ng-controller="MyController as myCtrl"> <li ng-click="myCtrl.setTab(0)" ng-class="{'highlighted':myCtrl.toggleClass(0)}">One</li> <li ng-click="myCtrl.setTab(1)" ng-class="{'highlighted':myCtrl.toggleClass(1)}">Two</li> <li ng-click="myCtrl.setTab(2)" ng-class="{'highlighted':myCtrl.toggleClass(2)}">Three</li> <li ng-click="myCtrl.setTab(3)" ng-class="{'highlighted':myCtrl.toggleClass(3)}">Four</li> </ul>
CSS
.highlighted { background-color: green; color: white; }
我无法相信每个人都有多复杂。 这其实很简单。 只需粘贴到您的HTML（没有指令./控制器更改所需 – “bg-info”是一个引导类）：
<div class="form-group col-md-12"> <div ng-class="{'bg-info': (!transport_type)}" ng-click="transport_type=false">CARS</div> <div ng-class="{'bg-info': transport_type=='TRAINS'}" ng-click="transport_type='TRAINS'">TRAINS</div> <div ng-class="{'bg-info': transport_type=='PLANES'}" ng-click="transport_type='PLANES'">PLANES</div> </div>
- 随着ng-bind-html-unsafe被删除，我如何注入HTML？
- 找不到模块'../build/Release/bson'] code：'MODULE_NOT_FOUND'} js-bson：无法加载c ++ bson扩展，使用纯JS版本
- Django的csrf标记+ Angularjs
- AngularJS和contentEditable两种方式绑定不能按预期工作
- angular.isdefined有什么好处？
- 要求和ng要求有什么区别？
- 从AngularJS指令访问属性
- 未知的提供者：$ modalProvider < – $ AngularJS的模态错误
- 使用angular / bootstrap的<select>占位符不起作用
