Question

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

知道我做错了吗？

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>

Answer 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 =“数据中的数据”部分提供的数据。

所以：

<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失败了。

顺便说一句，这段代码假定您想要的输出是：

吃药
- 英
  - 吃药
  - 碱式
- 中国
- 德国
- 等
晕海宁
- title2album1
- title2album2
- 等

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

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

JSON角度数组从第3循环中提取数据

1 个答案: