Angular js关联数组ng重复答案

【问题标题】：Angular js Asocciative array ng repeatAngular js关联数组ng重复
【发布时间】：2017-05-29 17:43:35
【问题描述】：

我有一个 Angular js 数组绑定到 $scope 对象。该数组是一个关联数组。简单的数组数组，我不知道如何在 ng-repeat 中遍历它。这是我的数组，我想获取子数组中第 0 个索引的每个文件的路径。我想得到

文件/文件/img1.bmp， 文件/file1/img1.jpg， 文件/file2/img1.jpg

$scope.im = [

 ["files/file/img1.bmp", "files/file/img2.jpg", "files/file/img3.jpg", "files/file/img4.jpg", "files/file/img5.jpg", "files/file/img6.jpg", "files/file/img7.jpg", "files/file/img8.jpg", "files/file/img9.jpg"],
 
 ["files/file1/img1.jpg", "files/file1/img2.jpg", "files/file1/img3.jpg", "files/file1/img4.jpg", "files/file1/img5.jpg", "files/file1/img6.jpg", "files/file1/img7.jpg", "files/file1/img8.jpg", "files/file1/img9.jpg"],
 
 ["files/file2/img1.jpg", "files/file2/img2.jpg", "files/file2/img3.jpg", "files/file2/img4.jpg", "files/file2/img5.jpg", "files/file2/img6.jpg", "files/file2/img7.jpg", "files/file2/img8.jpg", "files/file2/img9.jpg"]
            
];

【问题讨论】：

这不是关联数组。它的嵌套（2D）数组

标签： angularjs arrays

【解决方案1】：

不是真正的关联数组，因为您的值没有键。

但是，如果你想迭代你的数组，给定你的代码，只需使用：

<div ng-repeat="file in im"> 
    <!-- Now file is your list (e.g. ["files/file/img1.bmp", "files/file/img2.jpg"] -->
    <p>{{file[0]}}</p>
    <p>{{file[1]}}</p>
    <!-- and so on -->
</div>

您将获得数组中每个项目的第一个元素。

【讨论】：

感谢您的回答！现在有什么解决方案可以解析那个子数组吗，我正在使用 JSON.parse($scope.im[i]);但这向我显示了错误，“im”数组已被解析，但在我的情况下子数组被视为字符串，我想解析那些子数组
不客气。你不能用 json 解析你的子数组，因为它们不是。你想要什么输出？
基本上我遇到了一个问题，我从 HTML 输入中获取了多个文件。单击提交按钮时，这些文件路径的动态数组已生成，然后我对该动态生成的数组进行 JSON 编码，并将其插入数据库表中。直到数据库插入它都很好，但是当我使用 angular js ajax 检索该数组时出现问题，该数组被视为一个字符串，然后我将其设为 JSON.parse 以将其转换为数组，因此 $scope.im基本上是包含解析数组的数组，但子数组仍被视为字符串
也需要解析这些子数组，我正在动态制作 html 元素，它们是根据 ajax 调用的响应填充的，就像我在数据库中拥有的许多元素一样制作，但是在每个元素中都有一个图像位置，我想将第一个图像放在子数组中的每个元素上。就像在第一个元素上我想从子数组 1 第 0 个元素文件/文件/img1.jpg 中放置图像一样，在第二个元素上我想从子数组 2 第 0 个元素文件/file1/img1.jpg 中放置图像等等...
一直以来，我都面临失败；我现在所做的，当我在执行期间制作数组时，我将第一个图像保存在单独的列中，然后检索该列值，但是，当我 JSON 解析该值时，在每个元素上都显示了相同的 img，不是我想要的相关的。

【解决方案2】：

从这些嵌套数组中显示图像可能很简单，这里有一个例子：

<div ng-repeat="childArray in im">
  <div ng-repeat="photos in childArray">
      <img src="{{items}}" alt="something" />
  </div>
</div>

【讨论】：

【解决方案3】：

试试这个。正如@Priyesh Kumar 评论的那样，您应该使用嵌套的ng-repeat

  <div ng-repeat="key in im"> 
     <div ng-repeat="value in key"> 
        {{value}}
      </div>
   </div>

【讨论】：

【解决方案4】：

您可以遍历数组im，通常如docs 中所述，并访问内部数组的第一个元素

<ul>
   <li ng-repeat="list in im">
       <!--- list now represents the inner array --->
       {{ list[0] }} <!-- write the first path -->
   </li>
</ul>

【讨论】：

【解决方案5】：

如果您希望它适用于子数组的每个索引：

<div ng-repeat="(idx, value) in im[0]"> 
    <br>
    <div ng-repeat="file in im"> 
        <p>{{file[idx]}}</p>
    </div>
</div>

这将打印：

文件/文件/img1.bmp 文件/file1/img1.jpg 文件/file2/img1.jpg

文件/文件/img2.jpg 文件/file1/img2.jpg 文件/file2/img2.jpg

...

【讨论】：