pridávanie a odstraňovanie tried v angularJs pomocou ng-click

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;
    });
Damjan Pavlica
Edited question 23 október 2015 в 8:31
Programovanie
javascript angularjs angularjs-ng-click ng-class
8 december 2013 в 11:03
20 zobrazenia

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>
M98
Edited answer 18 júl 2016 в 8:45
Komentáre (10)
Riešenie

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>

  <div ng-class="class">{{class}}</div>
  Change Class

Tu je príklad fungujúci na [jsFiddle][1]

Andrew Watanabe
Edited answer 26 júl 2016 в 3:16
Komentáre (4)

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));
};
Komentáre (0)