angular.js ng-repeat - überprüfen, ob die Bedingung wahr ist, dann verwenden Sie eine andere Sammlung

Ich frage mich, ist es möglich zu überprüfen, welche Sammlung innerhalb ng-repeat zu verwenden?angular.js ng-repeat - überprüfen, ob die Bedingung wahr ist, dann verwenden Sie eine andere Sammlung

Zum Beispiel in meinem Controller Ich habe 2 Arrays von Daten vom Server geholt, jetzt habe ich ng-switch zwischen ihnen umschalten, überprüfen Sie dieses jsbin - http://jsbin.com/diyefevi/1/edit?html,js,output

Das Problem ist, dass diese li Ansichten in meiner realen Anwendung sind groß, aber sehr ähnlich .. so würde ich wirklich gerne verwenden 1 ng-repeat anstelle von 2.

Also frage ich mich, ob etwas wie ng-repeat="book in if list==='adultBooks' adultBooks else childBooks" in Angular möglich ist?

Danke!

Quelle

2014-04-15 Kosmetika

Try this ...

In Ihrem Controller

$scope.getDataSource=function(condition){ 

    if(condition){ return dataSource1; } 
    return dataSource2; 
};

In Ihrem Html

ng-repeat="book in getDataSource(/*condition*/)

MVVM Muster beraten unsere Logik immer in der Steuerung zu setzen und nicht in der Ansicht (HTML). Wenn Sie jemals "Logik" in Ihrer Sicht hinzufügen, gibt es wahrscheinlich einen alternativen "besseren" Weg, es zu tun.

Aber nur für "Spaß" Sie kann dies auch tun:

ng-repeat="book in {true: adultBooks, false: childBooks}[list==='adultBooks']"

So:

<li ng-repeat="book in {true: childBooks, false:adultBooks}[list==='childBooks']">{{book.name}

Hier ist die vollständige Probe:

http://jsbin.com/diyefevi/5/edit?html,js,output

Quelle

2014-04-15 15:50:56 Dalorzo

abhängt, nicht wahr? Ich meine, wenn die Ansicht wird immer konsequent die gleiche Logik ... –

@DaveKaye nicht auf diese Frage, kann es davon abhängen, ob diese Lösung auf andere Szenarien angewendet wird, aber nicht auf diese. – Dalorzo

Die einfachsten Lösungen kann ich denken wäre, ein neues Array auf dem Bereich zu definieren, auf dem Sie die anderen Arrays nach Bedarf festlegen.

z. http://jsbin.com/diyefevi/4/edit?html,js,output

Quelle

2014-04-15 15:58:27 Augier

So etwas würde die Notwendigkeit für ng-Schalter eliminieren:

<!DOCTYPE html> 
<html ng-app="test"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body ng-controller="MainCtrl"> 
    <a href="" ng-click="toggleList()">Toggle List</a> 
    <h1>{{list}}</h1> 
    <ul> 
     <li ng-repeat="book in getBooks()">{{book.name}}</li> 
    </ul> 
</body> 
</html>

und die js:

var app = angular.module('test', []); 
app.controller('MainCtrl', function ($scope) { 
    $scope.list = 'childBooks'; 

    $scope.childBooks = [{name: 'Dodobird'}, {name: 'Catty Red Hat'}]; 

    $scope.adultBooks = [{name: 'Little Lady'}, {name: 'Johny Doe'}]; 

    $scope.toggleList = function() { 
    $scope.list = $scope.list === 'childBooks' ? 'adultBooks' : 'childBooks'; 
    }; 

    $scope.getBooks = function() { 
    if($scope.list == 'adultBooks') { 
     return $scope.adultBooks; 
    } else { 
     return $scope.childBooks; 
    } 
    } 
});

Hier ist die jsbin code

Quelle

2014-04-15 16:01:02 zszep

angular.js ng-repeat - überprüfen, ob die Bedingung wahr ist, dann verwenden Sie eine andere Sammlung

Antwort

Verwandte Themen