web-dev-qa-db-fra.com

Comment basculer d'une classe ng à l'état actif dans un élément ng-repeat en utilisant 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 pour la classe 'active' provient de bootstrap. 

Donc, le basculement fonctionne, ce qui est presque là où je le veux; Je voudrais qu'il soit similaire aux états actifs dans les liens de navigation, sauf que dans mon exemple, il s'agit d'images, alors vous devez vous soucier des chaînes d'URL, etc.

J'ai essayé d'émuler cet exemple trouvé ici en vain (j'ai essayé la même logique pour les images): ng-class pour mettre en surbrillance l'élément de menu actif basé sur ng-repeat. AngularJS

Si quelqu'un pouvait me diriger dans la bonne direction, je l'apprécierais grandement. :RÉ

angularjsangularjs-ng-repeatangularjs-ng-clickng-class
8
matenji

Ce que je ferais dans votre situation est de définir un objet dans la portée parente de ce ng-repeat et d’affecter l’index ou ce que vous souhaitez à une propriété de cet objet. En effet, les objets fonctionnent par référence en javascript, ce qui signifie que le clic-ng mettra à jour l'attribut de portée parent au lieu de le redéfinir . Exemple à plnkr: http://plnkr.co/edit/oA12yLIb3RnlSYe6JxhI? p = aperçu

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

À votre santé

13
HeberLZ

Vous pouvez l'essayer de la manière suivante:

<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>
0
ashish yadav