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

假设我有两个json文件item-list.json和item-types.json，分别包含items数组和item-types数组。那么如何使用angularjs对项目列表进行分类？这里是Plunker链接：目前有不同的列表显示。但我想将这两个列表合并如下：

类型1

• 清单项目1
• 清单项目2
• 清单项目3

类型2

• 清单项目4

类型3

• 清单项目5
• 清单项目6

---

请帮忙。我对AngularJS是新手。提前感谢

我已经更新了您的HTML并获得了结果。PFB新的plunkr与刚刚更新的HTML代码

---

我已经更新了您的HTML并获得了结果。PFB新的plunkr与刚刚更新的HTML代码

---

您要做的是使用角度过滤器在视图中进行过滤：

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

如果没有必要，我建议您不要使用

ng。它将为您节省大量性能和子范围问题

IMHO模型操作（此处将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>


{type}


{{item.ItemName}

{{item.IsActive？'active'：'Inactive'}



您要做的是使用角度过滤器在视图中过滤：

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

如果没有必要，我建议您不要使用
ng。它将为您节省大量性能和子范围问题

IMHO模型操作（此处将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>


{type}


{{item.ItemName}

{{item.IsActive？'active'：'Inactive'}



我建议您将2个json文件合并为1个对象，然后使用angularjs进行嵌套循环。当然，您可以使用过滤器直接通过视图完成工作，但这不是imho的正确方式。@RaphaMex感谢您的回复。我不能同时使用json和json。实际上我使用的是：var nestedList=$scope.itemsList.filter（函数（项）{return item.ItemTypeId==$scope.itemsTypes.ItemTypeId；}）；它在控制台中显示空数组。还有其他方法吗？我建议您将2个json文件合并为1个对象，然后使用angularjs进行嵌套循环。当然，您可以使用过滤器直接通过视图完成工作，但这不是imho的正确方式。@RaphaMex感谢您的回复。我不能同时使用json和json。实际上我使用的是：var nestedList=$scope.itemsList.filter（函数（项）{return item.ItemTypeId==$scope.itemsTypes.ItemTypeId；}）；它在控制台中显示空数组。还有别的办法吗？它很有魅力！！我们可以用剑道Ui列表视图来做同样的事情吗？它的效果很好！！我们可以使用剑道Ui列表视图进行同样的操作吗？