Ich habe das folgende Element.Anzeigeelement in Winkel basierend auf Bedingung in Array von Objekten
<div> My element</div>
und das folgende Objekt:
$scope.myObject = {'life_log' : [{status: 'ALIVE'},{status: 'DEAD'}]}
Wie ich das Element angezeigt werden kann nur, wenn alle Status ALIVE ist.
Ich weiß, wie man ng-show auf einer Variablen verwendet, aber was ist mit einer solchen Bedingung?
Sie müssen eine Funktion erstellen, die Ihr Array durchläuft und überprüft, ob alle Status 'ALIVE' sind. Oder nur ein reduzieren verwenden Methode auf dem Array:
$scope.allStatusesAreAlive = $scope.myObject.life_log.reduce(function(a, b) {
if (a === false) return false;
if (b.status === 'DEAD') return false;
return true;
}, true);
Dann können Sie Ihr Element anzeigen, wenn $ scope.allStatusesAreAlive wahr ist:
<div ng-if="allStatusesAreAlive"> My element</div>
Ehrfürchtig. Ich habe versucht, eine Funktion zu verwenden, aber myobject ist immer leer. Ich schätze, weil die Ansicht vorher gebaut wurde. Wie repariere ich das? – KingKongFrog
Wenn Sie eine AJAX-Anforderung stellen, um die Daten für myObject abzurufen, müssen Sie angular angeben, um die Ansicht zu aktualisieren. Sie können dies tun, indem Sie Ihren Code in ein $ -Zeitlimit setzen (das den Digest-Zyklus auslöst, der die Ansicht erneut darstellt. $ Timeout ruft $ rootScope auf. $ Digest, das den Digest-Zyklus auslöst). Sie müssen den $ Timeout-Dienst in Ihren Controller injizieren und ihn wie folgt verwenden $ timeout (function() {myObject hier aktualisieren}); –
Auch das Filtern nach 'ALIVE' und das Vergleichen der Länge würde funktionieren und ich denke, das ist leichter zu lesen. Bitte schauen Sie sich [fiddle] (https://jsfiddle.net/awolf2904/zeuzzp6w/) an. Die Reduzierung ist auch eine gute Möglichkeit, es zu erkennen. Ich denke, dass dein Code ein bisschen optimiert werden kann. Bitte werfen Sie einen Blick auf die Geige. – AWolf
Sie können
angular.forEach($scope.myObject.life_log, function(item){
if(item.status !=='ALIVE'){
$scope.isAlive = false;
break;
}else{
$scope.isAlive = true;
}
});
dann in Ihrem html
<div data-ng-if="isAlive">My element</div>
// This is here to make it configurable
$scope.keys = Object.keys($scope.myObject);
// In this case you have the "life_log" key
$scope.keys.forEach(k => {
$scope.myObject[k].forEach((d) => {
// our object here is myObject["life_log"];
// obj is a temp array to check the amount of statuses that are dead
var obj = [];
d["allAlive"] = d.status.forEach(s =>{
if(s == 'DEAD'){
obj.push("Dead");
}
});
if(obj.length > 0){
d.allAlive = false
}else{
d.allAlive = true;
}
});
});
<div ng-if="myObject[o].allAlive>
ALL ALIVE
</div>
Überprüfen Sie den folgenden Link
https://plnkr.co/edit/ermeKk1dBX8D54pL7vHQ?p=preview
Winkelcode:
$scope.myObject = {'life_log' : [{status: 'ALIVE'},{status: 'DEAD'}]}
$scope.val=true;
for(i=0;i<$scope.myObject.life_log.length;i++){
if($scope.myObject.life_log[i].status != "ALIVE")
$scope.val=false;
}
HTML-Code:
<div ng-show="val">My element</div>
Im Allgemeinen würden Sie wahrscheinlich verwenden ng-wenn, aber es könnte sein, ein anderer Weg, abhängig davon, wie Sie myObject.life_log benutzen? In einer ng-Wiederholung, in der Sie alle Objekte in der Sammlung durchlaufen werden? Ein anderer Weg? – jbrown