Jak przełączać stan aktywny w klasie ng w powtarzalnym przedmiocie za pomocą ng-click?

<ul> 
    <li data-ng-repeat="image in images" data-ng-click="toggle = !toggle" data-ng-init="toggle=false"> 
     <img data-ng-class="{'active' : toggle}" src="" /> 
    </li> 
</ul>

CSS dla klasy "aktywnej" pochodzi z bootstrapu.

Tak więc przełączanie działa, co jest prawie tam, gdzie chcę; Chciałbym, aby był podobny do aktywnych stanów w linkach nawigacyjnych, z wyjątkiem mojego przykładu, który zajmuje się obrazami, więc musisz się martwić o ciągi URL itp.Jak przełączać stan aktywny w klasie ng w powtarzalnym przedmiocie za pomocą ng-click?

Próbowałem emulować ten przykład tutaj bezskutecznie (próbowałem tej samej logiki w przypadku zdjęć): ng-class to highlight active menu item based on ng-repeat. AngularJS

Jeśli ktoś mógłby wskazać mi właściwy kierunek, byłbym bardzo wdzięczny. : D

Źródło

2014-08-28 matenji

To, co zrobiłbym w twojej sytuacji, to zdefiniowanie obiektu wewnątrz zakresu macierzystego tego powtórzenia ng i przypisanie indeksu lub cokolwiek chcesz do właściwości tego obiektu. Dzieje się tak dlatego, że obiekty działają przez odwołanie w javascript, co oznacza, że ng-click faktycznie zaktualizuje atrybut zakresu macierzystego zamiast go przedefiniować. Przykład na plnkr: http://plnkr.co/edit/oA12yLIb3RnlSYe6JxhI?p=preview

<!DOCTYPE html> 
<html ng-app> 

    <head> 
    <style> 
     .active{ 
      background-color: red; 
      height: 500px; 
      width: 500px; 
     } 
    </style> 
    </head> 

    <body ng-controller="HolaCtrl"> 
    <ul> 
     <li data-ng-repeat="image in images" data-ng-click="toggleObject.item = $index">a 
     <img data-ng-class="{'active' : toggleObject.item == $index}" src="" /><br> 
     </li> 
    </ul> 
    <script> 
     function HolaCtrl($scope){ 
      $scope.images = [1,2,3]; 
      $scope.toggleObject = {item: -1}; 
     } 
    </script> 
    </body> 

</html>

Cheers

Źródło

2014-08-29 01:01:39 HeberLZ

Yea, I stwierdził kod działa doskonale. Niepożądane jest selekcja wielokrotna. Powinno być tak, że po kliknięciu jednego obrazu drugi obraz jest odznaczony. Podobnie jak w tym temacie dotyczącym aktywnych pozycji menu: http://stackoverflow.com/questions/19943217/ng-class-to-highlight-active-menu-item-based-on-ng-repeat-angularjs – matenji

DZIĘKUJEMY! Robiłem coś złego w indeksie $, ponieważ nie odwoływałem się do tego obiektu. Dziękuję bardzo!! :) :) – matenji

Można spróbować go w następujący sposób:

<body> 
<style> 
.blue{ 
    background:blue; 
} 
</style> 
<div ng-app='my'> 
    <div ng-controller='maincontroller as mainctrl'> 
    <div ng-repeat='item in mainctrl.arr'> 
    <p ng-class='{"blue":mainctrl.bgcolor==item}' 
    ng-click='mainctrl.addColor(item)'> 
    item {{item}} 
    </p> 

    </div> 
    </div> 
</div> 
<script> 
var app = angular.module('my',[]) 
app.controller('maincontroller',maincontroller) 
function maincontroller(){ 
var mainctrl = this; 
mainctrl.arr = [1,2,3,4,5,6]; 

mainctrl.addColor = function(data){ 
mainctrl.bgcolor = data 
} 
} 
</script> 
</body>

Źródło

2017-03-30 12:06:33

Jak przełączać stan aktywny w klasie ng w powtarzalnym przedmiocie za pomocą ng-click?

Odpowiedz

Powiązane problemy