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

97

Я пытаюсь понять, как добавить класс с помощью 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 angularjs-ng-click ng-class NewKidOnTheBlock
источник
не ясно из демонстрации или объяснения, какова цель. Кажется, вы пытаетесь переключить меню, но почему вы переключаете только ссылку меню в демо?
charlietfl
angulartutorial.net/2016/05/…
Prashobh

Ответы:

110

Вам просто нужно привязать переменную к директиве «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

Geonunez
источник
29
classявляется зарезервированным словом, используйте classNameвместо этого, компилятор YUI не сможет его минимизировать.
Орландо,
7
Как насчет того, чтобы использовать этот код для нескольких div в одном и том же представлении? этот код актуально меняет класс для всего div, как я могу применить класс только к выбранному элементу, по
которому
Спасибо. Чтобы полностью понять, что происходит при нажатии кнопки изменения класса, откройте консоль и просмотрите код.
fidev
1
Взгляните также на эту тему SO. Может быть, не на 100% связан с областью вопроса, но все же предоставляет дополнительную полезную информацию: stackoverflow.com/questions/31047094/…
BiLaL
144

Я хочу , чтобы добавить или удалить « 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>
милый дьявол086
источник
13
-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.
Майк Грабовски
2
Я просто избегаю части контроллера «здесь», поскольку это просто для демонстрации основных функций того, как это сделать ...
cutedevil086
1
Вы также можете использовать недокументированный синтаксис `ng-class =" {'active': true} [selectedTab === 'users'] "`
Коди
Я не понимаю, почему это сработает. Я делаю нечто очень похожее в Angular 1.3.8, и условный класс не удаляется из элемента при щелчке по другому. Я предполагаю, потому что другие элементы не отображаются повторно. Почему тогда это вообще сработало? Создавали ли старые версии Angular заново весь список при нажатии на один элемент?
Мэтт Молнар
Я просто добавляю это, потому что это может помочь кому-то еще в будущем. angular-ui-router имеет указанные вами функции и многое другое. Вы создаете состояния, которые представлены uri. Каждое состояние может иметь 1 или несколько контроллеров, 1 или несколько шаблонов и 1 или несколько связанных с ними представлений. Ссылки создаются с помощью директивы ui-sref. Директива ui-sref-active привяжет определенный класс к этому элементу, когда состояние активно. Документация по Angular UI-Router
deadbabykitten
12

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

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>
лучник
источник
8

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

    .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>
Шилан
источник
почему у вас в теге и директиве названия иконок?
Роберт Джонстон
Это глупый комментарий. Это совершенно законный поступок, хотя я согласен с тем, что, возможно, это не место для этого, когда вы объясняете, как что-то делать в Angular,
Берт
почему бы вам просто не сделать: angular.element ('глификон глификон-карандаш) .removeClass (' глификон глификон-карандаш ')? angular.element - это в значительной степени угловая версия jqLite для $ в jquery. Вы можете просто создать службу или директиву, которая вызывает эту функцию, и передавать в конструкторе значения removeClasses и addedClasses
MattE, 01
Это правда, но я пытался использовать простой angular js.
Шилан
7

У вас все правильно, все, что вам нужно сделать, это установить 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));
};
Зак Аргайл
источник
4 

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

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

        $scope.isVisible = false;
    });
<div ng-show="isVisible" ng-class="{'active':isVisible}" class="block"></div>
Развернуть фрагмент

Джей Пракаш Сингх
источник
2

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

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>
Адриан Давел
источник
2

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

контролер

 (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;
}
Деннис Ванони
источник
-1

Я не могу поверить, насколько сложно все это делают. На самом деле это очень просто. Просто вставьте это в свой 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>
Джон Палло
источник
-1

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

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;
  }
Развернуть фрагмент

М Сингх
источник