Ik probeer te werken hoe een klasse toe te voegen met ngClick. Ik heb mijn code geupload naar plunker Klik hier. Kijkend naar de angular documentatie kan ik niet achterhalen hoe het precies gedaan moet worden. Hieronder is een fragment van mijn code. Kan iemand mij in de juiste richting sturen
<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;
});
Ik wil toevoegen of verwijderen "actieve
" klasse in mijn code dynamisch op ng-klik
, hier wat ik heb gedaan.
<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>
Je hoeft alleen maar een variabele te binden in de directive "ng-class" en deze te wijzigen vanuit de controller. Hier is een voorbeeld van hoe dit te doen:
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>
Hier is het voorbeeld dat werkt op [jsFiddle][1]
Je hebt het precies goed, alles wat je hoeft te doen is selectedIndex in je ng-click zetten.
ng-click="selectedIndex = 1"
Hier is hoe ik een set knoppen heb geïmplementeerd die de ng-view veranderen, en de knop van de huidig geselecteerde view accentueren.
<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>
en dit in mijn controller.
$scope.router = function(endpoint) {
$location.path("/" + ($scope.partial = endpoint));
};