Wie können Sie einen aktiven Status ng-Klasse in einem ng-repeat-Element mit ng-click umschalten?

<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 für 'aktive' Klasse ist von Bootstrap.

Also Umschalten funktioniert, das ist fast wo ich es will; Ich möchte es ähnlich aktiven Zuständen in Navigationsverknüpfungen, außer in meinem Beispiel es handelt sich um Bilder, so müssen Sie sich Sorgen um url Zeichenfolgen, etc.Wie können Sie einen aktiven Status ng-Klasse in einem ng-repeat-Element mit ng-click umschalten?

Ich habe versucht, dieses Beispiel zu emulieren hier vergeblich (ich versuchte die gleiche Logik für Bilder): ng-class to highlight active menu item based on ng-repeat. AngularJS

Wenn mir jemand in die richtige Richtung zeigen könnte, würde ich es sehr schätzen. : D

Quelle

2014-08-28 matenji

Was ich in Ihrer Situation tun würde, ist ein Objekt innerhalb des übergeordneten Bereichs dieser ng-Wiederholung zu definieren, und den Index oder was auch immer Sie wünschen, eine Property dieses Objekts zuweisen. Das liegt daran, dass Objekte in JavaScript durch Verweis arbeiten, was bedeutet, dass der ng-Klick das Attribut des übergeordneten Bereichs tatsächlich aktualisiert, anstatt es neu zu definieren. Beispiel bei 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>

Prost

Quelle

2014-08-29 01:01:39 HeberLZ

Ja, sagte ich der Code perfekt funktioniert. Was unerwünscht ist, ist die Mehrfachauswahl. Es sollte sein, dass wenn ein Bild angeklickt wird, das andere Bild abgewählt wird. Genau wie dieses Thema, das sich mit aktiven Menüpunkten beschäftigt: http://stackoverflow.com/questions/19943217/ng-class-to-highlight-active-menu-item-based-on-n-repeat-angularjs – matenji

DANKE! Ich habe mit $ index etwas falsch gemacht, weil ich dieses Objekt nicht referenziert habe. Ich danke dir sehr!! :) :) – matenji

Sie können es in folgenden Weise versuchen:

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

Quelle

2017-03-30 12:06:33

Wie können Sie einen aktiven Status ng-Klasse in einem ng-repeat-Element mit ng-click umschalten?

Antwort

Verwandte Themen