додавання та видалення класів у angularJs за допомогою ng-click

97

Я намагаюся працювати, як додати клас за допомогою ngClick. Я завантажив свій код на планкер. Натисніть тут . Дивлячись на кутову документацію, я не можу зрозуміти, як саме це слід зробити. Нижче - фрагмент мого коду. Хтось може направити мене у правильному напрямку

 <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;
    });

— NewKidOnTheBlock
джерело

З демонстрації чи пояснення не зрозуміло, яка мета. Здається, ви намагаєтесь переключити меню, але чому ви лише перемикаєте посилання на меню в демонстраційній версії?

— charlietfl

angulartutorial.net/2016/05/…

— Прашобх

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

— Білал

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>

— cutedevil086
джерело

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'] "`

— Cody

Я не розумію, чому це спрацює. Я роблю щось дуже схоже в кутовому 1.3.8, і умовний клас не видаляється з елемента, коли клацається інший. Я вважаю, що інші елементи не рендеруються. Чому тоді це колись спрацювало? Чи старі версії Angular заново створювали весь список при натисканні на один елемент?

— Matt Molnar

Я просто додаю це, тому що це може допомогти комусь іншому в цілому. angular-ui-router має функціонал, який ви вказуєте, та багато іншого. Ви створюєте стани, які представлені урі. У кожному штаті може бути 1 або більше контролерів, 1 або більше шаблонів та 1 або більше переглядів, прив'язаних до них. Посилання створюються за допомогою директиви ui-sref. Директива ui-sref-активна прив'язує певний клас до цього елемента, коли стан активний. Документація кутового UI-маршрутизатора

— 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

— bert

чому б вам просто не зробити: angular.element ('glyphicon glyphicon-pencil) .removeClass (' glyphicon glyphicon-pencil ')? angular.element в значній мірі кутова версія jqLite $ в jquery. Ви можете просто створити службу або директиву, яка викликає цю функцію, і передає у конструкторі removeClasses і addedClasses

— MattE

Це правда, але я намагався використовувати звичайний кутовий js.

— Шилан

7

У вас все правильно, все, що вам потрібно зробити, це встановити selectedIndex своїм клацанням.

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

Розгорніть фрагмент

— М Сінгх
джерело