Angular.js如何更改單擊元素css類並刪除所有其他

Question

我試圖讓我的兩個元素切換，所以如果一個元素被點擊，它將刪除我的類的所有引用，並將其應用於它的自我。有任何想法嗎？

<span id="1" ng-style="my-class" ng-click="tog=my-class"></span> 

<span id="2" ng-style="my-class" ng-click="tog=my-class"></span> 

乾杯！

Answer 1

創建一個名爲的selectedIndex一個scope屬性，以及itemClicked功能：

function MyController ($scope) { 
    $scope.collection = ["Item 1", "Item 2"]; 

    $scope.selectedIndex = 0; // Whatever the default selected index is, use -1 for no selection 

    $scope.itemClicked = function ($index) { 
    $scope.selectedIndex = $index; 
    }; 
} 

然後我的模板會是這個樣子：

<div> 
     <span ng-repeat="item in collection" 
      ng-class="{ 'selected-class-name': $index == selectedIndex }" 
      ng-click="itemClicked($index)"> {{ item }} </span> 
</div> 

僅供參考$指數是一個神奇ng-repeat指令中可用的變量。

您也可以在指令和模板中使用同一個樣本。

這裏是一個工作plnkr：

http://plnkr.co/edit/jOO8YdPiSJEaOcayEP1X?p=preview

Answer 2

你有沒有嘗試ng類的條件就像這裏：http://jsfiddle.net/DotDotDot/zvLvg/？

<span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span> 
    <span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span> 

Answer 3

對我來說，這似乎是最好的解決辦法是使用一個指令;控制器不需要知道視圖正在更新。

的Javascript：

var app = angular.module('app', ['directives']); 

angular.module('directives', []).directive('toggleClass', function() { 
    var directiveDefinitionObject = { 
     restrict: 'A', 
     template: '<span ng-click="localFunction()" ng-class="selected" ng-transclude></span>', 
     replace: true, 
     scope: { 
      model: '=' 
     }, 
     transclude: true, 
     link: function (scope, element, attrs) { 
      scope.localFunction = function() { 
       scope.model.value = scope.$id; 
      }; 
      scope.$watch('model.value', function() { 
       // Is this set to my scope? 
       if (scope.model.value === scope.$id) { 
        scope.selected = "active"; 
       } else { 
        // nope 
        scope.selected = ''; 
       } 
      }); 
     } 
    }; 
    return directiveDefinitionObject; 
}); 

HTML：

<div ng-app="app" ng-init="model = { value: 'dsf'}"> <span>Click a span... then click another</span> 

<br/> 
<br/> 
<span toggle-class model="model">span1</span> 

<br/><span toggle-class model="model">span2</span> 

<br/><span toggle-class model="model">span3</span> 

CSS：

.active { 
    color:red; 
} 

我有一個小提琴是demonstrates.點擊一個指令時的想法是，一個函數被調用在爲當前作用域ID設置變量的指令上。那麼每條指令也會觀察到相同的值。如果範圍ID匹配，則使用ng-class將當前元素設置爲活動狀態。

使用指令的原因是您不再依賴控制器。事實上，我根本沒有控制器（我確實在名爲「model」的視圖中定義了一個變量）。然後，您可以在項目中的任何位置重用此指令，而不僅僅是在一個控制器上。

Answer 4

通常與Angular你會輸出這些跨度使用ngRepeat指令和（就像你的情況）每個項目都會有一個ID。我知道在所有情況下都不是這樣，但通常情況下，從後端請求數據 - 數組中的對象往往具有唯一的標識符。

您可以使用此ID來簡化列表中項目的類別切換（請參閱下面的plunkr或代碼）。

使用對象ID也可以消除由於在Angular中進行排序而導致$ index（在其他答案中描述）混亂時出現的不良影響。

例Plunkr：http://plnkr.co/edit/na0gUec6cdMABK9L6drV

（如果person.id等於$ scope.activeClass基本應用。主動選擇類 - 這是我們設置當用戶點擊一個項目

希望這幫助別人，我發現在納克級的表現是非常有用的！

HTML

<ul> 
    <li ng-repeat="person in people" 
    data-ng-class="{'active-selection': person.id == activeClass}"> 
    <a data-ng-click="selectPerson(person.id)"> 
     {{person.name}} 
    </a> 
    </li> 
</ul> 

JS

app.controller('MainCtrl', function($scope) { 
    $scope.people = [{ 
    id: "1", 
    name: "John", 
    }, { 
    id: "2", 
    name: "Lucy" 
    }, { 
    id: "3", 
    name: "Mark" 
    }, { 
    id: "4", 
    name: "Sam" 
    }]; 

    $scope.selectPerson = function(id) { 
    $scope.activeClass = id; 
    console.log(id); 
    }; 
});  

CSS：

.active-selection { 
    background-color: #eee; 
} 

Answer 5

我只更改/刪除類：

function removeClass() { 
        var element = angular.element('#nameInput'); 
      element.removeClass('nameClass'); 
    }; 

Answer 6

HTML

<span ng-class="{'item-text-wrap':viewMore}" ng-click="viewMore= !viewMore"></span> 

Answer 7

不能回答hitautodestruct直接沒有足夠的聲譽，但它使用jquery函數混合使用並不常見角。 Angular支持Jquery的精簡版。

要了解更多關於此的信息，我會向您推薦在這個特定主題上寫得非常好的文檔。

https://docs.angularjs.org/api/ng/function/angular.element