Angularjs 嵌套的ng repeat始终显示数组中的最后一项

我需要在两个表中显示类别和子类别的列表。用于以HTML格式显示类别数据：

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

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

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

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

      },

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

{
  "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",   
  }
}

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

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

      },

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

{
  "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来演示这一点：

如果您在Plunk中看到，如果您在选中“类别1”之后选中“类别2”，则类别1和类别2的子类别都会更新。第3类的情况也一样。最后一个项目的子类别会到处更新。

---

请帮我解决这个问题，让我知道我做错了什么，

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

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

让我知道这是否有意义

--编辑-- 因为我已经一天没有你的消息了，所以我决定添加一个plunkr来告诉你我在说什么：

这是控制器：

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>

{{item.name}}>
{{item1.subname}

不清楚

如何工作您可以忽略此开关。我为此添加了一个角度开关库。我已经编辑了代码，建议您在中为此创建一个演示。如果不在开发人员中查看UI和检查，很难提供帮助tools@charlietfl，我创建了一个Plunker来演示这一点。在原始问题中的链接Maurice，我已经删除了上面的查询。请参阅原始问题中的新Plunker链接，它演示了我面临的问题。我明白您的观点，将子类别嵌套在父类别对象中，但我的项目中的后端是一个独立的团队，数据模型的设计与此类似，并在其他地方使用。所以我不确定改变这一点是否可行。请告诉我当前数据模型是否有解决方案。无论如何，谢谢你的建议，这是绝对可行的。在每个类别对象中都有一个最初设置为null的数组。当用户选择一个类别时，您在控制器中运行一个方法来检查该子类别数组。如果数组为null，则它会调用您的Web服务以获取所选类别的子类别。如果没有，则返回一个空数组。如果有子类别，则返回所需的子类别。然后，将第二个ng repeat绑定到作为项目一部分的子类别数组。或者，在控制器中创建一个数组，该数组键入父类别Id，然后根据类别Id将第二个ng repeat绑定到该数组。@VijayMenon-我已经用一个可用的plunkr和代码示例更新了上面的答案。请检查，如果您认为这解决了您的问题，请将我的答案标记为已接受的答案。谢谢