Question

我有这个JSON（我没有创建它，也无法更改它）

{"tags": [
    {
      "title": "news",
      "options": [
          {
            "title": "important",
          },
          {
            "title": "less important",
          }
         ]
    },
    {
       "title": "entertainment",
       "options": [
           {
              "title": "entertainment",
           }
          ]
     }

我想将其显示为列表，如果某个标题只有一个选项，那么标题应该显示在列表中，如果标题在选项中有多个项目，则应显示主标题还应显示选项标题。最终结果（根据上面的例子）应显示：

 <ul>
     <li>news<ul>
                <li>important</li>
                <li>less important</li>
             </ul>
        </li>
    <li>entertainment</li>
  </ul>

我怎么能在angularJS中做到这一点？

Answer 1

如果myList是您在json对象的$scope中使用的名称，则可以尝试使用类似的东西。基本上是ng-repeat，内部ng-repeat

<ul ng-repeat="element in myList.tags">
    <li>
        {{element.title}}
        <ul ng-repeat="innerElement in element.options">
            <li>{{innerElement.title}}</li>
        </ul>
     </li> 
</ul>

Answer 2

我假设您的json文件存储在名为result

的变量中

<ul ng-repeat = "tg in result.tags">
   <li ng-if="tg.options.length > 1">{{tg.title}}
      <ul ng-repeat ="innerElement in tg.options" >
         <li>{{innerElement.title}}</li>
      </ul>
   </li>
   <li ng-if="tg.options.length==1">{{tg.title}}</li>
</ul>

Answer 3

Thnx，上述两项建议都有助于明确解决方案。我需要将两个ng-repeat循环嵌套在一起并将ng-if应用于内循环。

我最终得到了这个灵魂：

<ul> <li ng-repeat="x in myData.tags"> {{x.title}} <ul ng-repeat="y in x.options" ng-if="x.options.length>1"> {{y.title}} </ul> </li> </ul>

使用angular来显示复杂json中的列表

3 个答案: