Snažím sa zistiť, ako pridať triedu s ngClick. Svoj kód som nahral na plunker Kliknite sem. Pri pohľade na angular dokumentáciu neviem prísť na presný spôsob, ako by sa to malo urobiť. Nižšie je uvedený úryvok môjho kódu. Môže ma niekto naviesť správnym smerom
<div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>
Ovládač
var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){
$scope.toggle = function (){
$scope.isVisible = ! $scope.isVisible;
};
$scope.isVisible = false;
});
Chcem pridať alebo odobrať "active
" triedu v mojom kóde dynamicky na ng-click
, tu som to urobil.
<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>
Stačí, ak do smernice "ng-class" priradíte premennú a zmeníte ju z kontroléra. Tu je príklad, ako to urobiť:
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>
Tu je príklad fungujúci na [jsFiddle][1]
Máte to presne tak, stačí nastaviť selectedIndex v ng-click.
ng-click="selectedIndex = 1"
Tu je spôsob, akým som implementoval sadu tlačidiel, ktoré menia ng-view a zvýrazňujú tlačidlo aktuálne vybraného pohľadu.
<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>
a toto v mojom kontroléri.
$scope.router = function(endpoint) {
$location.path("/" + ($scope.partial = endpoint));
};