Javascript 如何在ng repeat中正确执行函数

情况：

<div class="row" ng-repeat="permission_group in list_permission_groups">
  <div class="col-sm-3">
    <h3>
      {{permission_group.permission_group_name}} 
    </h3>
  </div>
  <div class="col-sm-9">
    <ul>
      <li ng-repeat="category in list_categories">
        <span>
          {{ category.name }} 
        </span>            
        <div class="checkbox">
          <label>                
            <div ng-init="temp_result = get_Sub_Categories(category.category_id)">                  
              <p ng-repeat="sub_category in temp_result">
                {{ sub_category.name }} 
              </p>                  
            </div>               
          </label>
        </div>           
      </li>
    </ul>
  </div>
</div>

我正在用AngularJs制作一个分配权限的应用程序。 为了做到这一点，我有三个嵌套的ng重复

第一个循环：显示权限组

第二个循环：为每个权限组显示类别。 在此循环内执行一个函数，该函数将获取每个类别的所有子类别

第三个循环：显示子类别

问题：

<div class="row" ng-repeat="permission_group in list_permission_groups">
  <div class="col-sm-3">
    <h3>
      {{permission_group.permission_group_name}} 
    </h3>
  </div>
  <div class="col-sm-9">
    <ul>
      <li ng-repeat="category in list_categories">
        <span>
          {{ category.name }} 
        </span>            
        <div class="checkbox">
          <label>                
            <div ng-init="temp_result = get_Sub_Categories(category.category_id)">                  
              <p ng-repeat="sub_category in temp_result">
                {{ sub_category.name }} 
              </p>                  
            </div>               
          </label>
        </div>           
      </li>
    </ul>
  </div>
</div>

问题在于第二个循环中函数的执行

尝试1-ng初始化：

<div class="row" ng-repeat="permission_group in list_permission_groups">
  <div class="col-sm-3">
    <h3>
      {{permission_group.permission_group_name}} 
    </h3>
  </div>
  <div class="col-sm-9">
    <ul>
      <li ng-repeat="category in list_categories">
        <span>
          {{ category.name }} 
        </span>            
        <div class="checkbox">
          <label>                
            <div ng-init="temp_result = get_Sub_Categories(category.category_id)">                  
              <p ng-repeat="sub_category in temp_result">
                {{ sub_category.name }} 
              </p>                  
            </div>               
          </label>
        </div>           
      </li>
    </ul>
  </div>
</div>

这种行为很奇怪。由于肮脏的检查，页面加载了682次。 不显示任何结果

尝试2-ng单击：（仅用于调试）

<div class="row" ng-repeat="permission_group in list_permission_groups">

  <div class="col-sm-3">

    <h3>
      {{permission_group.permission_group_name}} 
    </h3>

  </div>

  <div class="col-sm-9">
    <ul>
      <li ng-repeat="category in list_categories">
        <span>
          {{ category.name }} 
        </span>

        <div class="checkbox">
          <label>

            <button ng-click="get_Sub_Categories(category.category_id)">
              GET SUB-CATEGORIES
            </button>

            {{ list_sub_categories }} 

          </label>
        </div>

      </li>
    </ul>
  </div>
</div>

这次只加载一次页面。 如果我按下按钮，将显示正确的子类别，但当然不仅仅是对应类别，而是所有类别，因为我正在修改全局范围内的var

目标：

<div class="row" ng-repeat="permission_group in list_permission_groups">
  <div class="col-sm-3">
    <h3>
      {{permission_group.permission_group_name}} 
    </h3>
  </div>
  <div class="col-sm-9">
    <ul>
      <li ng-repeat="category in list_categories">
        <span>
          {{ category.name }} 
        </span>            
        <div class="checkbox">
          <label>                
            <div ng-init="temp_result = get_Sub_Categories(category.category_id)">                  
              <p ng-repeat="sub_category in temp_result">
                {{ sub_category.name }} 
              </p>                  
            </div>               
          </label>
        </div>           
      </li>
    </ul>
  </div>
</div>

我想要得到的只是显示每个类别的所有适当子类别。 无需使用按钮，只需在页面加载后立即查看所有正确的内容即可。 但我不明白如何在AngularJs中正确地实现这一点

问题：

<div class="row" ng-repeat="permission_group in list_permission_groups">
  <div class="col-sm-3">
    <h3>
      {{permission_group.permission_group_name}} 
    </h3>
  </div>
  <div class="col-sm-9">
    <ul>
      <li ng-repeat="category in list_categories">
        <span>
          {{ category.name }} 
        </span>            
        <div class="checkbox">
          <label>                
            <div ng-init="temp_result = get_Sub_Categories(category.category_id)">                  
              <p ng-repeat="sub_category in temp_result">
                {{ sub_category.name }} 
              </p>                  
            </div>               
          </label>
        </div>           
      </li>
    </ul>
  </div>
</div>

如何在ng repeat中正确执行函数，返回并显示每个循环的不同数据

编辑-一个类别的子类别示例转储：

[{
    "sub_category_id": "1",
    "name": "SUB_CATEGORY_1",
    "category_id_parent": "1",
    "status": "VISIBLE"
}, {
    "sub_category_id": "2",
    "name": "SUB_CATEGORY_2",
    "category_id_parent": "1",
    "status": "VISIBLE"
}, {
    "sub_category_id": "3",
    "name": "SUB_CATEGORY_3",
    "category_id_parent": "1",
    "status": "VISIBLE"
}, {
    "sub_category_id": "4",
    "name": "SUB_CATEGORY_4",
    "category_id_parent": "1",
    "status": "VISIBLE"
}]

---

我认为这里的好方法是使用角度指令

您可以在此处看到ng repeat中使用的指令示例：

---

有关指令的更多信息，请查看官方文档：

我将为类别创建一个工厂，然后将get\u sub\u categories函数移动到此新工厂中

在ng repeat中调用函数与普通函数相同。由于您需要在页面加载时显示子类别，因此最好事先获取这些数据。 异步加载子类别不适合此场景

下面是一个实现这一点的小片段（）

类别：{{Category.name}
{{{subCategory.name}

控制器

angular.module("app", [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.model = {
    categories: [{
        "Id": 1,
        name: '1'
    }, {
        "Id": 2,
        name: '2'
    }],
    subCategories: [{
        "parentId": 1,
        name: 'a1'
    }, {
        "parentId": 1,
        name: 'a2'
    },
                   {
        "parentId": 2,
        name: 'a3'
    }]
}
$scope.getSubCategories = function(parentId){
    var result = [];
    for(var i = 0 ; i < $scope.model.subCategories.length ; i++){
        if(parentId === $scope.model.subCategories[i].parentId){
            result.push($scope.model.subCategories[i]);               
        }
    }
    console.log(parentId)
    return result;
}}])

角度模块（“应用程序”，[]） .controller（'ctrl'，['$scope'，函数（$scope）{ $scope.model={ 类别：[{ “Id”：1， 姓名：“1” }, { “Id”：2， 姓名：'2' }], 子类别：[{ “家长ID”：1， 名称：“a1” }, { “家长ID”：1， 名称：“a2” }, { “家长ID”：2， 名称：“a3” }] } $scope.getSubCategories=函数（parentId）{ var结果=[]； 对于（变量i=0；i<$scope.model.subCategories.length；i++）{ if（parentId==$scope.model.subCategories[i].parentId）{ 结果推送（$scope.model.subCategories[i]）； } } console.log（parentId） 返回结果； }}])

---

子类别示例不适用于我的案例，出于某种原因，它将我的代码带入了infinte循环。可能是因为我在用手风琴

我使用ng init在ng repeat中实现了这个函数调用

<td class="lectureClass" ng-repeat="s in sessions" ng-init='presenters=getPresenters(s.id)'>
      {{s.name}}
      <div class="presenterClass" ng-repeat="p in presenters">
          {{p.name}}
      </div>
</td> 

而API工厂如下所示：

angular.module('tryme3App').factory('SessionPresenters', function ($resource, DateUtils) {

        return $resource('api/session.Presenters/:id', {}, {
            'query': { method: 'GET', isArray: true},
            'get': {
                method: 'GET', isArray: true
            },
            'update': { method:'PUT' }
        });
    });

---

您能发布一个您试图显示的数据转储吗？想法很清楚，但是如果没有看到输入数据，很难提出建议。好的，谢谢。我已经添加了问题。好的，我不够清楚，对不起。你能添加一个所有输入数据的短转储吗？这包括

list\u permission\u group

以及这些值与

list\u categories

@johnnyfittizio的关系。这是一个很好的问题，它解释得很好，并且有一些错误。很好！你可以把你的问题缩短很多谢谢你，朋友，这似乎是正确的方法。我正在努力。我能提个小问题吗。根据此解决方案，如何将从服务器检索到的数据分配给模型？我已经尝试过$scope.model={categories:$scope.list_categories}但是不起作用（返回null）非常感谢！您可以将模型初始化为空白$scope.model={类别：[]，子类别：[]}。一旦您从服务器获得数据（我假设它是http调用/承诺对象），就以以下方式分配值：$scope.model.categories=data…，$scope.model.subCategories=data…，这似乎在每个摘要周期调用getSubCategories（category.Id）。使用下面讨论的ng init方法，我看不到相同的行为。您在回答几个问题时发布了相同的代码。如果问题实际上是重复的，请将其标记为重复，而不是回答。根据正确答案，我还面临无限循环问题。所以我使用你的答案，但是“presenters”是空数组，在{p.name}中没有显示任何内容。所以如果你有任何想法，请帮助我。非常感谢。请确保您的$scope.getPresenters=函数（id）{}工作正常，可以在presenters中设置值