New*_*ock 95 javascript angularjs angularjs-ng-click ng-class
我正在尝试如何使用ngClick添加类.我已将我的代码上传到plunker上点击此处.看一下角度文档,我无法弄清楚它应该完成的确切方式.下面是我的代码片段.有人能引导我朝着正确的方向前进
<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;
});
cut*_*086 144
我想在我的代码中动态添加或删除 " active"类ng-click,这就是我所做的.
<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>
geo*_*nez 109
您只需将变量绑定到指令"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的示例
小智 11
有一个简单而干净的方法只使用指令.
<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>
如果要删除以前的类并添加新类,也可以在指令中执行此操作
.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>
你完全正确,你所要做的就是在ng-click中设置selectedIndex.
ng-click="selectedIndex = 1"
以下是我实现一组更改ng视图的按钮的方法,并突出显示当前所选视图的按钮.
<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));
};
| 归档时间： |
|
| 查看次数： |
335244 次 |
| 最近记录： |