使用AngularJS

时间:2016-07-29 09:47:04

标签: angularjs

我想显示一个类别层次结构数据,我将angularJS与ng-repeat和ng-if.Here一起用于我的演示文件:

  <div ng-app="" ng-controller="DanhMucController">
    <ul>
      <li ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==0">{{danhmuc.name}}
        <ul>
          <li ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==2">
            {{danhmuc.name}}
            <ul ng-repeat="danhmuc in DanhMucList" ng-if="danhmuc.depended==4">
              <li>{{danhmuc.name}}</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>

控制器:

<script>
    function DanhMucController($scope, $http) {
        var url = "category.txt";
        $http.get(url).success(function(response) {
            $scope.DanhMucList = response;
        });
    }
</script>

此文件类别数据:

[{
  "id": "1",
  "name": "Parent1",
  "depended": "0"
}, {
  "id": "2",
  "name": "Parent2",
  "depended": "0"
}, {
  "id": "3",
  "name": "Parent3",
  "depended": "0"
}, {
  "id": "4",
  "name": "ChildA",
  "depended": "1"
}, {
  "id": "5",
  "name": "ChildB",
  "depended": "2"
}, {
  "id": "6",
  "name": "ChildC",
  "depended": "3"
}, {
  "id": "7",
  "name": "grandChildA",
  "depended": "4"
}, {
  "id": "8",
  "name": "grandChildB",
  "depended": "5"
}, {
  "id": "9",
  "name": "grandChildC",
  "depended": "6"
}, {
  "id": "10",
  "name": "grandChildD",
  "depended": "5"
}, {
  "id": "11",
  "name": "grandChildE",
  "depended": "6"
}, {
  "id": "12",
  "name": "grandChildF",
  "depended": "3"
}]

category Image

但我不能定义父ID的ID,所以它不显示我需要的数据。它必须显示:

-Parent 1包含ChildA。

-Parent 2包含ChildB。

-Parent 3包含ChildC。

每个人都可以建议我解决我的问题。谢谢大家

1 个答案:

答案 0 :(得分:1)

你可以做这样的事情here

我建议您更好地安排数据,而不是循环使用相同的数据3次。