2016-05-14 12 views
2

ng-repeat文字列インデックスを持つ配列の上に?以下のコードのスニペットを参照してください。文字列インデックス付き配列上のAngularJS - ng-repeat

以下のコードはコントローラ内にあります。

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

関連する問題