如何在ng-repeat中正确执行函数 [英] How to properly execute a function inside ng-repeat

问题描述

情况：

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

I am making an app in AngularJs that assign permissions. In order to do this i have three nested ng-repeat.

第一个循环：显示PERMISSION GROUP

First loop: display PERMISSION GROUP

第二个循环：对于每个权限组，显示CATEGORIES。
在这个循环中执行一个函数，它将获得每个类别的所有SUB CATEGORIES

Second loop: For each permission group display CATEGORIES. Inside this loop execute a function that will get all the SUB CATEGORIES for each category

第三个​​循环：显示SUB CATEGORIES

Third loop: display SUB CATEGORIES

问题：

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

The problem is in the execution of the function inside the second loop.

ATTEMPT 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次。
未显示结果。

Te behavior is quite strange. Porbably due to dirty checking the page is loaded 682 times. No result is displayed.

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;

    });

}

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

This time the page is loaded only once. If I press the button the proper sub-categories are displayed BUT of course not only for the corresponding category but FOR ALL, because i am modifying the var in the global scope.

目标：

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

What I want to obtain is simply displaying all the proper sub-categories for each category. Without using a button, but simply see all the proper content as soon as the page load. But i don't understand how can this be done properly in AngularJs.

问题：

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

How can i properly execute a function inside a ng-repeat that return and display different data for each loop?

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

EDIT - DUMP OF EXAMPLE OF SUB-CATEGORIES FOR ONE CATEGORY:

[{
    "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"
}]

推荐答案

调用纳克重复内的功能是一样的正常之一。由于您需要在页面加载时显示子类别，因此最好事先获取这些数据。
异步加载子类别将不适合这种情况。

Calling a function inside ng-repeat is same as normal one. Since you need to display the sub categories at the time of page loading its better to get these data beforehand. Asynchronously loading sub categories will not fit into this scenario.

这是实现此目标的最小代码段（ JS小提琴）

Here is a minimal snippet achieving this (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;
}}])

这篇关于如何在ng-repeat中正确执行函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！