web-dev-qa-db-fra.com

Faire un événement bascule ng-click

J'ai été en mesure de créer une fonction pour basculer avec succès les lignes de ma table ng à développer en cliquant, cependant, lorsque vous les cliquerez à nouveau, elles ne se cacheront pas. La fonction dans le javascript est:

$scope.toggle = function() {
    return !this.booleanVal;
}; 

Le booleanVal est une valeur du fichier json (chaque ligne avec sa propre valeur). Puis dans le HTML.

<p class="row_description more" ng-click="row.booleanVal = toggle()">{{row.description}</p>
<div class="check-element animate-show" ng-show="row.booleanVal">

Cela fonctionne pour le premier clic, transformant le booleanVal précédemment faux en true, cependant, il ne toggle retourne en false. Une idée de ce qui ne va pas?

9
Kylie Moden

Essaye ça:

<p class="row_description more" ng-click="row.booleanVal = !row.booleanVal">
    {{row.description}
</p>
<div class="check-element animate-show" ng-show="row.booleanVal"></div>
24
Mathew Berg

Salut, jetez un œil ici: http://jsbin.com/hefeb/1/edit

  $scope.toogle = function(i)
  {
    i.booleanVal = !i.booleanVal 

  };
2
sylwester

Vous pouvez également utiliser un opérateur conditionnel.

Essaye ça:

<p class="row_description more" 
   ng-click="row.booleanVal =row.booleanVal?false:true">
   {{row.description}}
</p>
<div class="check-element animate-show" ng-show="row.booleanVal"></div>
1
MaheshKumar

Vous pouvez effectuer l'une des opérations suivantes:

  • Utilisez this.row.booleanVal Dans la fonction toggle()
  • Basculez directement votre booléen dans la directive ngClick: ng-click="row.booleanVal = !row.booleanVal"
0
Thomas Roch