Angular.js Jak zmienić klasę css elementów po kliknięciu i usunąć wszystkie pozostałe

Question

Próbuję zmienić moje dwa elementy, więc jeśli kliknięty zostanie jeden element, usunie wszystkie odwołania do mojej klasy i zastosuje ją do jego jaźń. Jakieś pomysły?

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

Pozdrawiam!

Answer 1

Tworzenie właściwość zakres nazwie selectedIndex, i itemClicked funkcja:

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

Wtedy mój szablon będzie wyglądać mniej więcej tak:

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

tylko dla odniesienia $ index jest magia zmienna dostępna w dyrektywach powtarzania ng.

Możesz użyć tej samej próbki w ramach dyrektywy i szablonu.

Oto plnkr robocze:

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

Answer 2

Czy próbowałeś z warunkiem w klasie ng jak tutaj: 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

Dla mnie wydaje się, że najlepszym rozwiązaniem jest użycie dyrektywy; kontroler nie musi wiedzieć, że widok jest aktualizowany.

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

Mam skrzypce że demonstrates. Chodzi o to, kiedy dyrektywa zostanie kliknięty, wywoływana jest funkcja w dyrektywie, która ustawia zmienną do bieżącego identyfikatora zakresu. Następnie każda dyrektywa również obserwuje tę samą wartość. Jeśli identyfikator zakresu jest zgodny, to bieżący element jest ustawiony jako aktywny przy użyciu klasy ng.

Powodem stosowania dyrektyw jest to, że nie jesteś już zależny od kontrolera. W rzeczywistości nie mam w ogóle kontrolera (definiuję zmienną w widoku o nazwie "model"). Następnie możesz ponownie użyć tej dyrektywy w dowolnym miejscu w projekcie, a nie tylko na jednym kontrolerze.

Answer 4

Zazwyczaj z Angular wyprowadzasz te przęsła za pomocą dyrektywy ngRepeat i (jak w twoim przypadku) każdy element będzie miał identyfikator. Wiem, że nie jest to prawdą we wszystkich sytuacjach, ale jest typowe, gdy żąda danych z zaplecza - obiekty w tablicy mają zwykle niepowtarzalne identyfikatory.

Możesz użyć tego identyfikatora, aby ułatwić przełączanie klas na pozycje na liście (zobacz kod poniżej lub kod poniżej).

Używanie identyfikatorów obiektów może również wyeliminować niepożądany efekt, gdy indeks $ (opisany w innych odpowiedziach) jest pomieszany z powodu sortowania w Angular.

Przykład Plunkr. http://plnkr.co/edit/na0gUec6cdMABK9L6drV

(w zasadzie zastosować klasę .active zaznaczania jeśli person.id jest równe $ scope.activeClass - którą ustawiony, gdy użytkownik kliknie element

Nadzieja ta pomaga ktoś, Znalazłem wyrażeń w ng klasy być bardzo przydatna!

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

I tylko zmiana/usunąć klasę:

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

Nie można odpowiedzieć hitautodestruct bezpośrednio nie wystarczającą renomę ale nie jest powszechną praktyką używanie funkcji Jquery pomieszanych z Kątowy. Angular obsługuje wersję Jquery w wersji Lite.

Aby dowiedzieć się więcej na ten temat, odsyłam do dokumentacji bardzo dobrze napisanej na ten temat.

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