Bandau išsiaiškinti, kaip pridėti klasę su ngClick. Įkėliau savo kodą į plunkerį Spauskite čia. Žvelgdamas į angular dokumentaciją negaliu suprasti, kaip tiksliai tai turėtų būti padaryta. Žemiau yra mano kodo fragmentas. Ar kas nors gali mane nukreipti tinkama linkme
<div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>
Valdiklis
var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){
$scope.toggle = function (){
$scope.isVisible = ! $scope.isVisible;
};
$scope.isVisible = false;
});
Noriu pridėti arba pašalinti "aktyvią
" klasę savo kode dinamiškai ng-click
, štai ką aš padariau.
<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>
Tereikia susieti kintamąjį su direktyva "ng-class" ir pakeisti jį iš valdiklio. Štai pavyzdys, kaip tai padaryti:
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>
Štai pavyzdys, veikiantis [jsFiddle][1]
Viskas, ką jums reikia padaryti, tai nustatyti selectedIndex savo ng-click.
ng-click="selectedIndex = 1"
Štai kaip įgyvendinau mygtukų rinkinį, kuris keičia ng rodinį ir paryškina šiuo metu pasirinkto rodinio mygtuką.
<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>
ir tai mano valdiklyje.
$scope.router = function(endpoint) {
$location.path("/" + ($scope.partial = endpoint));
};