Wie in zwei Divs die Elemente eines Arrays in Angular angezeigt werden?

Question

begegnete ich, dass vor kurzem.
Ich habe ein Array von Strings:

a= ['apple', 'rice','pasta','orange'] 

Es gibt einen Knopf zufällige Dinge in diesem Array zu schieben, nachdem sie in DB zu speichern, zB:

a.push('carrot');a.save() 

Wie es in der angezeigt werden DOM in zwei getrennten divs (wie Apfel, Orange auf der linken Seite, Reis, Pasta auf der rechten Seite, die Spaltung kann statisch sein, müssen Sie nicht eckig zu erkennen, um alle Früchte der Welt zu erkennen: P).

In meinem Kopf: Filter oder in zwei Variablen brechen und es zurück nach fusionieren? Meine (dirty) Lösung war:

var a = getFromDb 
$scope.b = _.filter(a,isFruit) 
$scope.c = _.filter(a,isNotFruit) 

Fruits : <div ng-repeat=fruit in b> {{fruit}}</div> 
Others : <div ng-repeat=notFruit in c> {{notFruit}}</div> 

$scope.save = function() { 
    var a = $scope.b + $scope.c 
    saveToDb(a) 
} 

Aber das sieht sehr hässlich und so würde ich lieben, wenn jemand eine andere Art hat?

Answer 1

Vorausgesetzt, dass Sie auf Umfang definieren (oder mit Controller-as):

$scope.a = ['apple', 'rice', 'pasta', 'orange'] 

dann in Vorlage, die Sie einfach a in zwei Teile aufgeteilt und separat verwenden:

<div class="left"> 
    <span ng-repeat="fruit in a.slice(0, 2)">{{ fruit }}</span> 
</div> 

<div class="right"> 
    <span ng-repeat="fruit in a.slice(2)">{{ fruit }}</span> 
</div>