Question

我要求在两个表格中显示类别和子类别列表。要在HTML中显示类别数据：

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

此处将显示第一个表中的类别和类别活动/非活动开关。

在第二个表中，我只需要显示第一个表中通过交换机激活的类别。它将显示子类别及其活动/非活动状态。 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中看到，如果您检查＆＃34;类别2＆＃34;在检查＆＃34;类别1和＃34;之后，子类别针对类别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始终显示数组中的最后一项

1 个答案: