добавление и удаление классов в angularJs с помощью ng-click

Я пытаюсь понять, как добавить класс с помощью ngClick. Я загрузил свой код в плункер Нажмите здесь. Глядя на документацию angular, я не могу понять, как это должно быть сделано. Ниже приведен фрагмент моего кода. Может ли кто-нибудь направить меня в правильном направлении

 <div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>

Контроллер

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });

javascript angularjs ng-class angularjs-ng-click
person NewKidOnTheBlock    schedule 08.12.2013    source источник
comment
не ясно из демонстрации или объяснения, какова цель. Кажется, вы пытаетесь переключить меню, но почему вы переключаете только ссылку меню в демо-версии?   -  person charlietfl    schedule 09.12.2013

Ответы (9)


arrow_upward
110
arrow_downward

Вам просто нужно привязать переменную к директиве «ng-class» и изменить ее с контроллера. Вот пример того, как это сделать:

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>

Вот пример работы с jsFiddle.

person geonunez    schedule 08.12.2013
comment
class - зарезервированное слово, используйте вместо него className, компилятор YUI не сможет его минимизировать. - person Orlando; 27.03.2014
comment
Как насчет того, чтобы использовать этот код для нескольких div в одном и том же представлении? этот код актуально меняет класс для всех div, как я могу применить класс только к выбранному элементу, по которому щелкнули - person xzegga; 24.04.2014
comment
Спасибо. Чтобы полностью понять, что происходит при нажатии кнопки изменения класса, откройте консоль и просмотрите код. - person fidev; 28.08.2015
comment
Взгляните также на эту тему SO. Может быть не на 100% связан с областью вопроса, но все же предоставляет дополнительную полезную информацию: stackoverflow.com/questions/31047094/ - person BiLaL; 17.10.2016

arrow_upward
144
arrow_downward

Я хочу добавить или удалить класс "active" в моем коде динамически на ng-click, вот что я сделал.

<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>
person cutedevil086    schedule 06.05.2014
comment
-1 для ng-init. Согласно документации AngularJS - The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope. - person Mike Grabowski; 22.09.2014
comment
Я просто избегаю здесь части контроллера, так как это просто для демонстрации основных функций того, как это сделать ... - person cutedevil086; 08.12.2014
comment
Вы также можете использовать недокументированный синтаксис `ng-class = {'active': true} [selectedTab === 'users']` - person Cody; 29.12.2014
comment
Я не понимаю, почему это сработает. Я делаю что-то очень похожее в Angular 1.3.8, и условный класс не удаляется из элемента при нажатии другого. Я предполагаю, потому что другие элементы не перерисовываются. Почему тогда это вообще сработало? Создавали ли старые версии Angular заново весь список при щелчке по одному элементу? - person Matt Molnar; 07.01.2015
comment
Я просто добавляю это, потому что это может помочь кому-то еще в будущем. angular-ui-router имеет указанные вами функции и многое другое. Вы создаете состояния, которые представлены uri. Каждое состояние может иметь 1 или несколько контроллеров, 1 или несколько шаблонов и 1 или несколько представлений, связанных с ними. Ссылки создаются с помощью директивы ui-sref. Директива ui-sref-active привяжет определенный класс к этому элементу, когда состояние активно. Документация по Angular UI-Router - person deadbabykitten; 26.03.2015
comment
Я бы объявил selectedTab в контроллере. - person Kishor Pawar; 08.08.2015
comment
@MikeGrabowski Думаю, документация была обновлена. Теперь он говорит, что его также можно использовать for injecting data via server side scripting - person Carcamano; 14.04.2016
comment
Я думаю, что этот ответ действительно потрясающий, и я использую это решение сейчас, но я не уверен, что на веб-сайте будет много вкладок на разных страницах, если это решение лучшее? Потому что он может добавить больше строк в DOM, и было бы лучше, если бы мы использовали функциональный способ ... - person Mohammad Kermani; 18.07.2016
comment
Но при перезагрузке страницы активный класс устанавливается на элемент по умолчанию. - person Avinash Raj; 22.11.2016

arrow_upward
12
arrow_downward

Есть простой и понятный способ сделать это только с помощью директив.

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>
person artecher    schedule 04.08.2016

arrow_upward
9
arrow_downward

вы также можете сделать это в директиве, если хотите удалить предыдущий класс и добавить новый класс

    .directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                if(element.attr("class") == "glyphicon glyphicon-pencil") {
                    element.removeClass("glyphicon glyphicon-pencil");
                    element.addClass(attrs.toggleClass);
                } else {
                    element.removeClass("glyphicon glyphicon-ok");
                    element.addClass("glyphicon glyphicon-pencil");
                }
            });
        }
    };
});

и в вашем шаблоне:

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>
person Shilan    schedule 26.05.2015
comment
почему в теге и директиве указаны названия иконок? - person Robert Johnstone; 03.07.2015
comment
Это глупый комментарий. Это совершенно законно, хотя я согласен, что, возможно, это не место для этого, когда вы объясняете, как что-то делать в Angular. - person bert; 16.09.2016
comment
почему бы вам просто не сделать: angular.element ('глификон глификон-карандаш) .removeClass (' глификон глификон-карандаш ')? angular.element - это в значительной степени угловая версия jqLite $ в jquery. Вы можете просто создать службу или директиву, которая вызывает эту функцию, и передать удаленные классы и добавленные классы в конструкторе. - person MattE; 01.01.2017
comment
Это правда, но я пытался использовать простой angular js. - person Shilan; 01.01.2017

arrow_upward
7
arrow_downward

У вас все правильно, все, что вам нужно сделать, это установить selectedIndex в ваш ng-click.

ng-click="selectedIndex = 1"

Вот как я реализовал набор кнопок, которые изменяют ng-view и выделяют кнопку текущего выбранного представления.

<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>

и это в моем контроллере.

$scope.router = function(endpoint) {
    $location.path("/" + ($scope.partial = endpoint));
};
person Zack Argyle    schedule 08.12.2013

arrow_upward
2
arrow_downward

Я использовал предложение Зака ​​Аргайла, приведенное выше, чтобы получить это, что я считаю очень элегантным:

CSS:

.active {
    background-position: 0 -46px !important;
}

HTML:

<button ng-click="satisfaction = 'VeryHappy'" ng-class="{active:satisfaction == 'VeryHappy'}">
    <img src="images/VeryHappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Happy'" ng-class="{active:satisfaction == 'Happy'}">
    <img src="images/Happy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Indifferent'" ng-class="{active:satisfaction == 'Indifferent'}">
    <img src="images/Indifferent.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Unhappy'" ng-class="{active:satisfaction == 'Unhappy'}">
    <img src="images/Unhappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'VeryUnhappy'" ng-class="{active:satisfaction == 'VeryUnhappy'}">
    <img src="images/VeryUnhappy.png" style="height:24px;" />
</button>
person Adriaan Davel    schedule 09.01.2016

arrow_upward
2
arrow_downward

Если вы предпочитаете разделение задач таким образом, чтобы логика добавления и удаления классов выполнялась на контроллере, вы можете сделать это.

контроллер

 (function() {
    angular.module('MyApp', []).controller('MyController', MyController);

    function MyController() {
      var vm = this;
      vm.tab = 0;

      vm.setTab = function(val) {
          vm.tab = val;
       };
      vm.toggleClass = function(val) {
          return val === vm.tab;
           };
        }
    })();

HTML

<div ng-app="MyApp">
  <ul class="" ng-controller="MyController as myCtrl">
    <li ng-click="myCtrl.setTab(0)" ng-class="{'highlighted':myCtrl.toggleClass(0)}">One</li>
    <li ng-click="myCtrl.setTab(1)" ng-class="{'highlighted':myCtrl.toggleClass(1)}">Two</li>
    <li ng-click="myCtrl.setTab(2)" ng-class="{'highlighted':myCtrl.toggleClass(2)}">Three</li>
   <li ng-click="myCtrl.setTab(3)" ng-class="{'highlighted':myCtrl.toggleClass(3)}">Four</li>
 </ul>

CSS 

.highlighted {
   background-color: green;
   color: white;
}
person Dennis Wanyonyi    schedule 24.06.2016

arrow_upward
0
arrow_downward

Я не могу поверить, насколько сложно все это делают. На самом деле это очень просто. Просто вставьте это в свой html (никаких изменений директивы / контроллера не требуется - "bg-info" - это класс начальной загрузки):

<div class="form-group col-md-12">
    <div ng-class="{'bg-info':     (!transport_type)}"    ng-click="transport_type=false">CARS</div>
    <div ng-class="{'bg-info': transport_type=='TRAINS'}" ng-click="transport_type='TRAINS'">TRAINS</div>
    <div ng-class="{'bg-info': transport_type=='PLANES'}" ng-click="transport_type='PLANES'">PLANES</div>
</div>
person john pallot    schedule 03.11.2016

arrow_upward
-1
arrow_downward

для реактивных форм -

HTML файл

<div class="col-sm-2">
  <button type="button"  [class]= "btn_class"  id="b1" (click)="changeMe()">{{ btn_label }}</button>
</div>

TS файл

changeMe() {
  switch (this.btn_label) {
    case 'Yes ': this.btn_label = 'Custom' ;
    this.btn_class = 'btn btn-danger btn-lg btn-block';
    break;
    case 'Custom': this.btn_label = ' No ' ;
    this.btn_class = 'btn btn-success btn-lg btn-block';
    break;
    case ' No ': this.btn_label = 'Yes ';
      this.btn_class = 'btn btn-primary btn-lg btn-block';
      break;
  }

person M Singh    schedule 12.06.2018