2016-05-14 1 views
2

Как с ng-repeat над массивом со строковым индексом? См. Ниже фрагмент кода.AngularJS - ng-repeat over array со строковым индексом

Ниже код находится в контроллере.

$scope.days = ["mon", "tue", "wed" .... "sun"]; 
$scope.arr = []; 
$scope.arr["mon"] = ["apple","orange"]; 
$scope.arr["tue"] = ["blue","swish"]; 
. 
. 
. 
$scope.arr["sun"] = ["pineapple","myfruit","carrot"]; 

Вопрос - Как ng-repeat как-то ниже, возможно ли это?

<div ng-repeat="day in days">{{day}} 
    <span ng-repeat="item in arr(day)">{{item}}</span> 
    <-- Something like "arr(day)", can it be done in angular --> 
</div> 
+0

вы хотите сделать это в контроллере или шаблон? – sumair

+0

@sumair - В шаблоне (файл html) –

+0

Из интереса почему вы не используете объект? – SmokeyPHP

ответ

1

Используйте квадратные скобки для доступа к полям/элементам объекта/массива.

<div ng-repeat="day in days">{{day}} 
    <span ng-repeat="item in arr[day]">{{item}}</span> 
</div> 
0

Вы можете использовать его как этот ng-repeat="item in arr[day]"

0

Вы можете напечатать номер товара тоже.

<div ng-repeat="day in days"> 
    {{day}} 
    <div ng-repeat="(key, value) in arr[day]">Item #{{key + 1}}: {{value}} 
    </div> 
    <br /> 
</div> 
3

Вы можете использовать обычный синтаксис для элемента в массиве. Пожалуйста, обратитесь моей скрипка

<div ng-app='app' ng-controller='default' ng-init='init()'> 
    <div ng-repeat='day in days'> 
    <strong>{{day}}</strong><br/> 
    <span ng-repeat="item in arr[day]">{{item}} </span> 
    </div> 
</div> 

https://jsfiddle.net/DoTH/evcv4tu5/3/

0

Да, это вполне возможно. См рабочий пример ниже:

var app = angular.module("sa", []); 
 

 
app.controller("FooController", function($scope) { 
 
    $scope.days = ["mon", "tue", "wed", "sun"]; 
 
    $scope.arr = []; 
 
    $scope.arr["mon"] = ["apple", "orange"]; 
 
    $scope.arr["tue"] = ["blue", "swish"]; 
 
    $scope.arr["sun"] = ["pineapple", "myfruit", "carrot"]; 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" ng-controller="FooController"> 
 
    <ol> 
 
    <li ng-repeat="day in days"> 
 
     <strong>{{day}}</strong> 
 
     <ol> 
 
     <li ng-repeat="item in arr[day]">{{item}}</li> 
 
     </ol> 
 
    </li> 
 
    </ol> 
 
</div>

Смежные вопросы