数组中的JavaScript数组

JavaScript array inside an array

本文关键字：数组 JavaScript      更新时间：2023-09-26

我想在"locationsList"上放置一个数组。下面的例子输出

"['Location 1', 'Location 2', 'Location 3']"

括号之类的。

我错过了什么？

App.controller('locationAccordionCtrl', function ($scope) {
  $scope.locations = [
    {
      "siteName":"First Site",
      "siteID":"First ID",
      "locationCount":"200 Locations",
      "locationsList":['Location 1', 'Location 2', 'Location 3'],
      "open":false
    }
  ];
});

这就是我的HTML的样子：

代码：

<div ng-controller="locationAccordionCtrl">
    {{location.locationsList}}
</div>

视觉：

200 Locations 
['Location 1', 'Location 2', 'Location 3']

我想要的是列出所有位置（用换行符）。例如：

200 Locations 
Location 1
Location 2
Location 3

假设您的HTML看起来像这样：

<html>
  ...
  <div ng-controller="locationAccordionController">
  </div>
  ...
</html>

为了获得您想要的输出，您需要使用ng repeat来迭代您的数组，并为每个数组构造一个DOM元素（例如<li>）：

<html>
  ...
  <div ng-controller="locationAccordionController">
    <div ng-repeat="location in locations">
      <p>{{location.locationCount}}</p>
      <ul>
        <li ng-repeat="innerLocation in location.locationsList track by $index">
          {{innerLocation}}
        </li>
      </ul>
    </div>
  </div>
  ...
</html>

更新：注意track by $index；这是因为Angular需要一种方法来将那些创建的DOM元素链接到$scope中的模型，并且如果您的数组中有重复的字符串，Angular（或通常的JavaScript）无法将它们区分开来。因此，我们使用数组中的位置（$index）作为每个元素的唯一标识符，以防存在重复。

您可以设置列表项的样式，使其没有项目符号（例如，如果使用Bootstrap，则为list-unstyled），也可以将其设为<p>而不是列表。

我觉得你在试图绘制

{{locations.locationsList}}

locationsList是一个数组，要单独绘制，您需要使用ng repeat

<div ng-repeat="location in locations.locationsList">{{location}}</div>

供参考-https://docs.angularjs.org/api/ng/directive/ngRepeat

实际上，您已经正确地使用了嵌套数组。

使用chrome F-12进入控制台并复制+粘贴，你会看到你做得正确：

我的例子：foobar={something:"else"，"foobar"："yes"，"delta"：["hello"，"world"]}

也许您的问题是jquery 中的回调

相关文章：