Come si attiva/disattiva una classe ng di stato attivo in un oggetto ng-repeat usando ng-clic?

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

I CSS per la classe 'active' provengono da bootstrap.

Così commutabile, che è quasi dove lo voglio; Mi piacerebbe che fosse simile agli stati attivi nei link di navigazione, tranne che nel mio esempio si tratta di immagini quindi è necessario preoccuparsi delle stringhe url, ecc.Come si attiva/disattiva una classe ng di stato attivo in un oggetto ng-repeat usando ng-clic?

Ho provato ad emulare questo esempio trovato qui inutilmente (ho provato la stessa logica per immagini): ng-class to highlight active menu item based on ng-repeat. AngularJS

Se qualcuno potesse indicarmi la giusta direzione, lo apprezzerei molto. : D

fonte

2014-08-28 matenji

Quello che vorrei fare nella tua situazione è definire un oggetto all'interno dell'ambito genitore di quella ng-repeat, e assegnare l'indice o qualsiasi altra cosa desideri ad un oggetto di quell'oggetto. Questo perché gli oggetti funzionano per riferimento in javascript, il che significa che il ng-clic aggiornerà l'attributo parent scope invece di ridefinirlo. Esempio a 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>

Acclamazioni

fonte

2014-08-29 01:01:39 HeberLZ

Sì, mi ha dichiarato il codice è perfettamente funzionante. Ciò che è indesiderabile è la selezione multipla. Dovrebbe essere che quando un'immagine viene cliccata, l'altra immagine viene deselezionata. Proprio come questo argomento che riguarda le voci di menu attive: http://stackoverflow.com/questions/19943217/ng-class-to-highlight-active-menu-item-based-on-ng-repeat-angularjs – matenji

GRAZIE! Stavo facendo qualcosa di sbagliato con $ index perché non stavo riferendo quell'oggetto. Grazie mille!! :) :) – matenji

Si può provare in questo modo:

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

fonte

2017-03-30 12:06:33

Come si attiva/disattiva una classe ng di stato attivo in un oggetto ng-repeat usando ng-clic?

risposta

Problemi correlati