嵌套的 ng-repeat 总是显示数组中的最后一项

Question

我需要在两个 table 中显示类别和子类别列表。为了显示类别数据，在 HTML 中：

 <tr ng-repeat="item in addNodeCtrl.categoryData track by $index">
 <td>{{item.name}}</td>
 <td>
 <input type="checkbox" ng-model="item.active">

这里会显示第一个table中的Category和Category active/Inactive开关。

在第二个 table 中，我只需要显示第一个 table 中已通过开关激活的类别。它将显示子类别及其 active/inactive 状态。 HTML 下面：

  <table ng-repeat="item in ctrl.categoryData | filter:{active:true} track by $index" ng-init="ctrl.getsubCategory(item.id)">
      <tbody>
        <tr>
          <td>{{item.name}}></td>
            <td>
                <table>
                <tr ng-repeat="item1 in ctrl.subCategoryData track by $index">
                     <td>{{item1.name}}</td>     
         <td><input type="checkbox" ng-model="item1.active">    
                     </td>
                </tr>
                </table>
           </td>
           </tr>
        </tbody>
        </table>

item.id为分类ID，下面给出JS中的getsubCategory函数

以下JS:

function getsubCategory(categoryid) {

  getsubcategservice.getsubcateg({categoryid: categoryid},{})
            .$promise.then(success,failure);

            function success(response){
                    vm.subCategoryData = response.data.subCategorys; 
                }

                               function failure(reason){
                            //error message
                }


}

这里的问题是，当我激活第一个类别开关时，子类别被填充，但是当第二个类别开关被激活时，第一组子类别也会改变并列出第二个类别的子类别已激活。

请查找以下类别的 JSON 数据：

    {
  "categoryInfoes": {
    "categoryInfo": [
      {
        "active": "true",
        "description": "category 1",
        "id": "1",

      },

      {
        "active": "true",
        "description": "category 2",
        "id": "2",
      },
      {
        "active": "true",
        "description": "category 3",
        "id": "3",
      }
    ]
  }
}

请在下面的子类别中找到 JSON：

{
  "subcategoryDetails": {
    "subCategorys": [
      {
        "active": "true",
        "name": "1 - subcategory 1",
      },
      {
        "active": "true",
        "name": "1 - subcategory 2",
      },
      {
        "active": "true",
        "name": "1 - subcategory 3",
      },
      {
        "active": "true",
        "name": "1 - subcategory 4",
      }
    ],
    "active": "true",
    "description": "category 1",
    "id": "1",   
  }
}

{
  "subcategoryDetails": {
    "subCategorys": [
      {
        "active": "true",
        "name": "2 - subcategory 1",
      },
      {
        "active": "true",
        "name": "2 - subcategory 2",
      },
      {
        "active": "true",
        "name": "2 - subcategory 3",
      },

    ],
    "active": "true",
    "description": "category 2",
    "id": "2",   
  }
}

{
  "subcategoryDetails": {
    "subCategorys": [
      {
        "active": "true",
        "name": "3 - subcategory 1",
      },
      {
        "active": "true",
        "name": "3 - subcategory 2",
      },
      {
        "active": "true",
        "name": "3 - subcategory 3",
      },

    ],
    "active": "true",
    "description": "category 3",
    "id": "3",   
  }
}

谁能帮我解决这个问题？

更新：

我创建了一个 Plunker 来证明这一点： https://plnkr.co/edit/LqioF8hugsjJCOfmj9Vb?p=preview

如果您在 Plunk 中看到，如果您在检查 "Category 1" 之后检查 "Category 2"，则类别 1 和类别 2 的子类别都会更新。类别 3 的情况相同。最后一个子类别项目随处更新。请帮我解决这个问题，让我知道我做错了什么，

Answer 1

这里的问题是您将子类别加载到范围中，然后在每次选择类别时更改范围中的值。就 Angular 而言，您只是想多次重复和显示该信息。解决这个问题的一种方法是将子类别嵌套到它们的父类别对象中，并将 ng-repeat 绑定到它们父类别的子类别。

如果数据量太大，无法一次加载所有内容，您甚至可以在选择这些内容时即时加载它们。

让我知道这是否有意义。

--编辑-- 由于我一天没有收到你的消息，我决定添加一个 plunkr 来向你展示我在说什么：

https://plnkr.co/edit/mquYiX?p=preview

这是控制器：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$http) {

  // I made the subcategory data an array
  $scope.subcategoryData = [];

    $http.get("data.json")
    .then(function(response) {
        $scope.categoryData = response.data;
    });


$scope.getsubCategory = function (categoryid) {
  $http.get("data"+categoryid+".json")
      .then(function(response) {
        // the subcategories are keyed on the category Id
        // and updated each time the method is called
        $scope.subcategoryData[categoryid] = response.data;
        console.log($scope.subcategoryData[categoryid]);
      })
    };  

});

这是你的 html:

<table ng-repeat="item in categoryData.categorydetail | filter:{active:true} track by $index" >
  <tbody>
    <tr>
      <td>{{item.name}}></td>
        <td ng-init="getsubCategory(item.id)">
          <table>
            <!-- here, I key the subcategoryData in the loop on the Item id.  Voila, now it works -->
            <tr ng-repeat="item1 in subcategoryData[item.id].subcategoryinfo track by $index">
             <td>{{item1.subname}}</td>     
             <td><input type="checkbox" ng-model="item1.subactive"></td>
            </tr>
          </table>
        </td>
    </tr>
  </tbody>
 </table>

嵌套的 ng-repeat 总是显示数组中的最后一项

nested ng-repeat always shows the last item in the array

angularjs

ng-repeat