Как отображать в двух divs элементы массива в Angular?

Question

Я столкнулся с этим недавно.
У меня есть один массив строк:

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

Там есть кнопка, чтобы выдвинуть случайные вещи в этот массив, чтобы сохранить его после того, как в БД, например:

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

Как отобразить его в DOM в двух отдельных divs (например, яблоко, оранжевый слева, рис, макароны справа, раскол может быть статическим, вам не нужно учить угловатому распознавать все плоды в мире: P).

На мой взгляд: фильтры или разбиваются на две переменные и сбрасываются обратно после? (загрязнен) раствор Мой был:

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) 
} 

Но это выглядит очень некрасиво, поэтому я хотел бы, если кто-то более причудливый путь?

Answer 1

При условии, что вы определяете по размаху (или с контроллера в качестве):

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

Затем в шаблоне вы можете просто разделить a на две части и использовать их по отдельности:

<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>