Question

假设我有两个json文件item-list.json和item-types.json，分别包含items数组和item types数组。那么如何使用angularjs对项目列表进行分类？这是Plunker链接：https://embed.plnkr.co/eqL876dwMPxuROkLQ4OP/目前显示不同的列表。但我希望将这两个列表组合在一起：

类型1
- 列出项目1
- 列出项目2
- 列出项目3
类型2
- 清单项目4
类型3
- 列表项目5
- 清单项目6

请帮忙。我是AngularJS的新手。提前致谢

Answer 1

我已更新您的HTML并获得结果。 PFB新plunkr，只更新了HTML代码。

https://embed.plnkr.co/FPp5LzLPnk1N2J6syY5M/

Answer 2

您要做的是使用角度过滤器：

在视图中进行过滤

item in itemsList | filter:{ItemTypeId:itemType.ItemTypeId}

我建议你不要在没有必要时使用ng-if。它将为您节省大量性能和子范围问题。

恕我直言模型操作（此处将2个JSON文件合并为1个对象）应该在控制器内完成，而不是视图。

为此，我更改了代码以确保在更新$ scope和渲染之前获得了两个JSON。

$http({
    method: 'GET',
    url: "item-types.json"

}).then((types_array) => {
    $http({
        method: 'GET',
        url: "item-list.json"
    }).then((items_array) => {
        let types = types_array.data.data.reduce( (acc,type) =>  {
            acc[type["ItemTypeId"]] = type["TypeName"];
            return acc;
        }, {});
        $scope.items = items_array.data.data.reduce( (acc,item) => {
            let type = types[item["ItemTypeId"]];
            if (! (type in acc) )
                acc[type] = [];
            acc[type].push(item);

            return acc;
        }, {});

    })
});

然后您的HTML变为：

<ol>
  <li ng-repeat="(type,items_array) in items">{{type}}
  <ul>
    <li ng-repeat="item in items_array">
      <p>{{item.ItemName}}</p>
      <small ng-class="{active:item.IsActive}">{{item.IsActive ?'active' : 'Inactive'}}</small>
    </li>
  </ul>
  </li>
</ol>

如何使用AngularJs从两个不同的json文件创建嵌套列表？

2 个答案: