如何添加和删除类AngularJS？ [英] How to add and remove class with AngularJS?

问题描述

我有工作就像切换几个按钮。如果您单击之一，它变得活跃和关闭按钮等。我这样做是使用jQuery而是想使用AngularJS。这里是我的code：

HTML

 ＆LT; D​​IV CLASS =按钮栏＆GT;
    ＆LT;一类=按钮按钮通电ID =弱＆GT;弱LT; / A＆GT;
    ＆下;一类=按钮按键断电ID =正常＆GT;正常＆下; / A＆GT;
    ＆LT;一类=按钮按钮通电ID =强＆GT;强＆LT; / A＆GT;
＆LT; / DIV＆GT;
 

的JavaScript

  .controller（'AppCtrl'，函数（$范围，$ stateParams）{        $（'＃弱'）。点击（函数（）{
            $（'＃弱'）addClass（激活）。
            $（'＃正常）removeClass移除（激活）。
            $（'＃强）removeClass移除（激活）。
        }）;        $（'＃正常'）。点击（函数（）{
            $（'＃正常'）addClass（激活）。
            $（'＃弱）removeClass移除（激活）。
            $（'＃强）removeClass移除（激活）。
        }）;        $（'＃强）。点击（函数（）{
            $（'＃强'）addClass（激活）。
            $（'＃正常）removeClass移除（激活）。
            $（'＃弱）removeClass移除（激活）。
        }）;   }）;
 

解决方案

您可以有 NG-点击，可以切换选标记，这可能是与纳克级使用绑定/解除绑定类。

标记

 ＆LT; D​​IV CLASS =按钮栏＆GT;
    ＆LT;一类=按钮按钮通电ID =弱
       NG-CLASS ={活跃：$ parent.selected =='弱'}NG点击=$ parent.selected =弱＆GT;
      弱
    ＆所述; / A＆GT;
    ＆LT;一类=按钮按钮通电ID =正常
       NG-CLASS ={活跃：选择=='正常'}NG点击=选择='正常'＆GT;
        正常
    ＆所述; / A＆GT;
    ＆LT;一类=按钮按钮通电ID =强
       NG-CLASS ={活跃：选择=='强'}NG点击=选择='强'＆GT;
        强大
    ＆所述; / A＆GT;
＆LT; / DIV＆GT;
 

工作小提琴

更好的办法

您可以很容易地通过使用做到这一点 NG-重复这将减少你的code系列。

标记

  $ scope.strengths =弱，正常，强];
 

code

 ＆LT; D​​IV CLASS =按钮栏＆GT;
    ＆LT;一类=按钮按钮通电ID =弱
       NG-CLASS ={活跃：$ parent.selected ==实力}
       NG-点击=$ parent.selected =实力
       NG-重复=实力优势＆GT;
      {{强度}}
    ＆所述; / A＆GT;
＆LT; / DIV＆GT;
 

I have a few buttons that work like switchers. If you click one it becomes active and "shuts down" other buttons. I did this using jQuery but would like to use AngularJS. Here is my code:

HTML

<div class="button-bar">
    <a class="button button-energized" id="weak">weak</a>
    <a class="button button-energized" id="normal">normal</a>
    <a class="button button-energized" id="strong">strong</a>
</div>

JavaScript

    .controller('AppCtrl', function($scope, $stateParams) {

        $('#weak').click(function() {
            $('#weak').addClass('active');
            $('#normal').removeClass('active');
            $('#strong').removeClass('active');
        });

        $('#normal').click(function() {
            $('#normal').addClass('active');
            $('#weak').removeClass('active');
            $('#strong').removeClass('active');
        });

        $('#strong').click(function() {
            $('#strong').addClass('active');
            $('#normal').removeClass('active');
            $('#weak').removeClass('active');
        });

   });

解决方案

You could have ng-click that can toggle selected flag, that could be use with ng-class to bind / unbind class.

Markup

<div class="button-bar">
    <a class="button button-energized" id="weak" 
       ng-class="{active: $parent.selected=='weak'}" ng-click="$parent.selected='weak'">
      weak
    </a>
    <a class="button button-energized" id="normal" 
       ng-class="{active: selected=='normal'}" ng-click="selected='normal'">
        normal
    </a>
    <a class="button button-energized" id="strong" 
       ng-class="{active: selected=='strong'}" ng-click="selected='strong'">
        strong
    </a>
</div>

Working Fiddle

Better way

You could easily do this by using ng-repeat which will reduce your line of code.

Markup

$scope.strengths = ["weak","normal","strong"];

Code

<div class="button-bar">
    <a class="button button-energized" id="weak" 
       ng-class="{active: $parent.selected == strength}" 
       ng-click="$parent.selected=strength"
       ng-repeat="strength in strengths">
      {{strength}}
    </a>
</div>

这篇关于如何添加和删除类AngularJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！