[英]AngularJS - ng-repeat over array with string index
How to ng-repeat
over array with string index?如何使用字符串索引ng-repeat
数组? Please see below snippet of the code-请参阅下面的代码片段-
Below code is in a controller.下面的代码在一个控制器中。
$scope.days = ["mon", "tue", "wed" .... "sun"];
$scope.arr = [];
$scope.arr["mon"] = ["apple","orange"];
$scope.arr["tue"] = ["blue","swish"];
.
.
.
$scope.arr["sun"] = ["pineapple","myfruit","carrot"];
Question - How to ng-repeat
like something below, is it possible?问题 - 如何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>
You can just use normal syntax for item in an array.您可以对数组中的项目使用普通语法。 Please refer my fiddle请参考我的小提琴
<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/ https://jsfiddle.net/DoTH/evcv4tu5/3/
Use square brackets to access object/array fields/elements.使用方括号访问对象/数组字段/元素。
<div ng-repeat="day in days">{{day}}
<span ng-repeat="item in arr[day]">{{item}}</span>
</div>
你可以像这样使用它ng-repeat="item in arr[day]"
You can print the item number too.您也可以打印项目编号。
<div ng-repeat="day in days">
{{day}}
<div ng-repeat="(key, value) in arr[day]">Item #{{key + 1}}: {{value}}
</div>
<br />
</div>
Yes, this is absolutely possible.是的,这是绝对可能的。 See a working example below:请参阅下面的工作示例:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.