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

Posted 2023-02-24

【中文标题】如何在 ng-repeat 中正确执行函数

【英文标题】：How to properly execute a function inside ng-repeat

【发布时间】：2014-12-11 13:08:21

【问题描述】：

情况：

我正在 AngularJs 中创建一个分配权限的应用程序。 为了做到这一点，我有三个嵌套的 ng-repeat。

第一个循环：显示PERMISSION GROUP

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

第三次循环：显示子类别

问题：

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

尝试 1 - ng-init：

<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>

在控制器中：

$scope.get_Sub_Categories = function(category_id) 
    $http(

        url: base_url + 'main/json_get_list_sub_categories',
        data: 
            category_id: category_id
        ,
        method: "POST"

    ).success(function(data) 

        return data;

    );

他的行为很奇怪。可能是由于脏检查页面加载了 682 次。 不显示结果。

ATTEMPT 2 - ng-click：（仅用于调试）

<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>

在控制器中：

$scope.get_Sub_Categories = function(category_id) 
    $http(

        url: base_url + 'main/json_get_list_sub_categories',
        data: 
            category_id: category_id
        ,
        method: "POST"

    ).success(function(data) 

        $scope.list_sub_categories = data;

    );

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

目标：

我想要获得的只是显示每个类别的所有正确子类别。 无需使用按钮，只需在页面加载后立即查看所有正确的内容。 但我不明白如何在 AngularJs 中正确完成。

问题：

如何在 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"
]

【问题讨论】：

您可以发布您要显示的数据的转储吗？这个想法很明确，尽管没有看到输入数据很难提出建议。

好的，谢谢。我已添加编辑问题。

好的，我不够清楚，抱歉。您能否添加所有输入数据的简短转储？这包括list_permission_groups 以及这些值与list_categories 的关系。

@johnnyfittizio 非常好的问题，它解释得很好，并且有一些 badda boo badda 蜜蜂。很好！

你可以缩短你的问题

【参考方案1】：

在 ng-repeat 中调用函数和普通函数一样。由于您需要在页面加载时显示子类别，因此最好事先获取这些数据。 异步加载子类别不适合这种情况。

这是实现此目的的最小 sn-p (JS Fiddle)

<div ng-app="app" ng-controller="ctrl">
    <div ng-repeat="category in model.categories"> <span> Category:  category.name  </span>

      <p ng-repeat="subCategory in getSubCategories(category.Id)"> subCategory.name </p>
   </div>
</div>

控制器

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;
])

【讨论】：

谢谢 Amitesh，这似乎是正确的做法。我正在做。我可以问一个小问题吗？根据这个解决方案，我如何将从服务器检索到的数据分配给模型？我已经尝试过 $scope.model = categories: $scope.list_categories 但不起作用（返回 null）非常感谢！

您可以将模型初始化为空白。 $scope.model = 类别：[]，子类别：[]。一旦你从我假设的服务器获取数据，它将是一个 http 调用/承诺对象，以下列方式分配值： $scope.model.categories = data...,$scope.model.subCategories= data...

这似乎在每个摘要周期调用 getSubCategories(category.Id)。使用下面讨论的 ng-init 方法，我看不到相同的行为。

【参考方案2】：

子类别示例不适用于我的情况，并且由于某种原因它使我的代码进入了无限循环。可能是因为我用的是手风琴。

我通过使用 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> 

控制器端的代码应如下所示

$scope.getPresenters = function(id) 
    return SessionPresenters.get(id: id);
;

而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' 
        );
    );

【讨论】：

您在几个问题的答案中发布了相同的代码。如果问题实际上是重复的，请标记它们而不是回答。

根据正确答案，我也遇到了无限循环问题。所以我使用您的答案，但“演示者”是空数组，p.name 中没有显示任何内容。因此，如果您有任何想法，请帮助我。非常感谢。

确保您的 $scope.getPresenters = function(id) 正常工作以在演示者中设置值

【参考方案3】：

我认为这里好的解决方案是使用 Angular Directive。

您可以在此处查看 ng-repeat 中使用的指令示例：Angular Directive Does Not Evaluate Inside ng-repeat

有关指令的更多信息，您可以查看官方文档：https://docs.angularjs.org/guide/directive

【参考方案4】：

我会为类别创建一个工厂，然后将您的 get_sub_categories 函数移动到这个新工厂中。