AngularJS - 使用字符串索引对数组进行 ng-repeat答案

【问题标题】：AngularJS - ng-repeat over array with string indexAngularJS - 使用字符串索引对数组进行 ng-repeat
【发布时间】：2016-09-10 17:51:51
【问题描述】：

如何ng-repeat 覆盖带有字符串索引的数组？请看下面sn-p的代码-

以下代码在控制器中。

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

【问题讨论】：

你想在控制器或模板中做吗？
@sumair - 在模板中（html 文件）
出于兴趣为什么不使用对象？
@SmokeyPHP - 我也可以使用对象。但是很想知道如何为数组做到这一点？顺便说一句，对象有可能吗？
请找类似的帖子stackoverflow.com/questions/19544904/…

标签： javascript arrays angularjs associative-array ng-repeat

【解决方案1】：

您可以对数组中的项目使用普通语法。请参考我的小提琴

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

【讨论】：

【解决方案2】：

使用方括号访问对象/数组字段/元素。

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

【讨论】：

【解决方案3】：

你可以这样使用ng-repeat="item in arr[day]"

【讨论】：

【解决方案4】：

您也可以打印商品编号。

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

【讨论】：

【解决方案5】：

是的，这是绝对可能的。请参阅下面的工作示例：

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>

【讨论】：