ngClick ile nasıl sınıf ekleyeceğimi çözmeye çalışıyorum. Kodumu plunker üzerine yükledim Buraya tıklayın. Angular dökümantasyonuna baktığımda tam olarak nasıl yapılması gerektiğini bulamıyorum. Aşağıda kodumun bir parçacığı var. Birisi bana doğru yönde rehberlik edebilir mi?
<div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>
Kontrolör
var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){
$scope.toggle = function (){
$scope.isVisible = ! $scope.isVisible;
};
$scope.isVisible = false;
});
Kodumdaki ng-click
üzerine dinamik olarak eklemek veya kaldırmak "active
" sınıfı istiyorum, burada yaptığım şey.
<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>
Sadece "ng-class" yönergesine bir değişken bağlamanız ve bunu kontrolörden değiştirmeniz gerekir. İşte bunun nasıl yapılacağına dair bir örnek:
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>
İşte [jsFiddle][1] üzerinde çalışan örnek
Tam olarak doğru anladınız, tek yapmanız gereken ng-click'inizde selectedIndex'i ayarlamak.
ng-click="selectedIndex = 1"
ng-view'i değiştiren ve o anda seçili olan görünümün düğmesini vurgulayan bir dizi düğmeyi nasıl uyguladığım aşağıda açıklanmıştır.
<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>
ve bu da kontrolörümde.
$scope.router = function(endpoint) {
$location.path("/" + ($scope.partial = endpoint));
};