Je boucle sur un tableau d'objets et je veux afficher des trucs en fonction de la valeur d'un champ pour chaque élément du tableau. Pour cela, j'ai un ng-repeat itérant dans mon tableau, et un ng-if évaluant si la valeur de mon élément actuel est appropriée.
Pour une raison quelconque, le ng-if semble toujours être évalué à vrai (ou non évalué à tout?)
edit.html
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.bulletin.legalRemedies = [{ "erased": true // invalid stuff }]; });
controller.js
XXX
Voici le jsfiddle (aucune donnée ne doit être affichée car la propriété effacée est vraie) https://jsfiddle.net/vtcLpzmx/2/
C'est probablement assez stupide mais je ne trouve pas pourquoi et ça me tue
3 Réponses :
Votre code fonctionne correctement. juste dans votre jsfiddle, je pense que vous avez manqué d'ajouter un script angulaire. de sorte qu'il ne considère pas ce violon comme une application angulaire.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div data-ng-app='myApp' data-ng-controller='myCtrl'> <div> <div ng-repeat="legalRemedy in bulletin.legalRemedies"> <div ng-if="!legalRemedy.erased"> Only valid stuff here </div> </div> </div> </div>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.bulletin = {}; $scope.bulletin.legalRemedies = [{"erased" : true}] });
$ scope.bulletin.legalRemedies provoque une erreur car $ scope.bulletin n'est pas défini. vous devez d'abord déclarer $ scope.bulletin à un objet.
<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div data-ng-app='myApp' data-ng-controller='myCtrl'> <div> <div ng-repeat="legalRemedy in bulletin.legalRemedies"> <div ng-if="!legalRemedy.erased"> Only valid stuff here </div> </div> </div> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.bulletin = { legalRemedies : [{ "erased": true // invalid stuff } ] } }); </script> </body> </html>
essayez la solution ci-dessous. a changé la variable $ scope.bulletin
.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app='myApp' ng-controller='myCtrl'> <div> <div ng-repeat="legalRemedy in bulletin.legalRemedies"> {{$index}} - {{ legalRemedy }} <div ng-if="!legalRemedy.erased"> Only valid stuff here </div> </div> </div> </div>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.bulletin = { legalRemedies : [{ "erased": true // invalid stuff },{ "erased": false }] }; });
Vos jsFiddle ne sont pas "exécutés" en tant qu'application angulaire, essayez d'ajouter une expression {{1 + 2}} quelque part et observez qu'elle n'est pas affichée sous la forme 3 mais sous la forme {{1 + 2}}