JSON Angular Array 从第三个循环中提取数据答案

【问题标题】：JSON Angular Array pulling data from 3rd LoopJSON Angular Array 从第三个循环中提取数据
【发布时间】：2014-08-31 01:42:24
【问题描述】：

我正在努力从下面数组中的第三个循环（名称）中提取数据。

知道我做错了什么吗？

sample.json

{
  "otc": [
    {
      "name": "Tums",
      "language": [
        {
          "title": "English",
          "names": [
            {"name": "Tums"},
            {"name": "Pepto"}
          ]
        },
        {
          "title": "China"
        },
        {
          "title": "Germany"
        }
        ,
        {
          "title": "Mexico"
        }
        ,
        {
          "title": "India"
        }
        ,
        {
          "title": "United Kingdom"
        }
      ]
    },
    {
      "name": "Dramamine",
      "language": [
        {
          "title": "title2album1"

        },
        {
          "title": "title2album2"
        },
        {
          "title": "title2album3"
        }
      ]
    }
  ]
}

这是我的 index.html

<body ng-app="list">

  <div ng-controller="ListCtrl">
   <ul>
    <li ng-repeat-start="meds in otc">
      <strong> {{meds.name}}</strong> //This displays just fine 
    </li>
    <li ng-repeat="lang in meds.language"><em>{{lang.title}}</em></li> //This displays just fine

    <li ng-repeat-end ng-repeat="drugs in lang.names">{{drugs.name}}</li> //This doesnt display
  </ul>
  </div>

  <script>
  angular.module('list', []);
    function ListCtrl($scope, $http) {
      $http({method: 'GET', url: 'sample.json'}).success(function(data) {
          $scope.otc = [];
          angular.forEach(data.otc, function(value, key) {
              $scope.otc.push(value);
          });
          $scope.isVisible = function(name){
              return true;
          };
        });
    }
  </script>

【问题讨论】：

标签： arrays json angularjs multidimensional-array

【解决方案1】：

看起来您的 JSON 数据有点不完整，因为您在所有语言对象中都缺少 names 键，English 除外。

除此之外，您的 html/angular-view 代码有点偏离。 ng-repeat 应该相互嵌套。这是通过让包含ng-repeat 指令的打开/关闭html 标记完全包围内部<li> 标记来完成的。

这有点难说，但是如果你想要嵌套列表，你需要添加<ul>标签，就像我下面的例子一样。

我相信您的索引 html 应该类似于：

  <ul>
    <li ng-repeat="meds in otc">
      <strong> {{meds.name}}</strong> //This displays just fine 
      <ul>
          <li ng-repeat="lang in meds.language">
                <em>{{lang.title}}</em>
                <ul>
                    <li ng-repeat="drugs in lang.names">{{drugs.name}}</li>
                </ul>
          </li>
      </ul>
    </li>
  </ul>

li ng-repeat 标签应该嵌套的原因是因为ng-repeat 创建了自己的隔离范围。这意味着在 ng-repeat 标签内部，它只能访问 ng-repeat="data in datar" 部分提供的数据。

所以有：

<li ng-repeat="lang in meds.language"><em>{{lang.title}}</em></li> //This displays just fine
<li ng-repeat="drugs in lang.names">{{drugs.name}}</li> //This doesnt display

作为兄弟元素，而不是第二个作为另一个子元素，第二个 ng-repeat 列表不知道 var lang 是什么。所以drugs in lang.names 失败了。

顺便说一句，这个 sn-p 假设你想要的输出是：

图姆斯
- 英文
  - 图姆斯
  - Pepto
- 中国
- 德国
- 等
德拉明
- title2album1
- title2album2
- 等

如果您希望输出为平面列表，可以使用以下 CSS

ul ul {
    padding: 0;
    margin: 0;
    list-style-type: disc;
}

【讨论】：

我喜欢您的方法，但是，也许添加一些 CSS 代码以使列表看起来像一个非嵌套列表，以使输出看起来像 @Travis 原始 HTML。在您的情况下，您也不需要 ng-repeat-start 或 ng-repeat-end，您可以只使用 ng-repeat，它使一切变得简单而美好。
正是我要找的东西，我不知道他们需要像这样嵌套，这样他们才能知道其他人发生了什么哈哈 :) 非常感谢干杯