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

查看：30
本文介绍了如何在 ng-repeat 中正确执行函数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

情况:

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

第一次循环:显示权限组

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

第三次循环:显示子类别

问题:

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

尝试 1 - ng-init:

<div class="col-sm-3"><h3>{{permission_group.permission_group_name}}
<div class="col-sm-9"><ul><li ng-repeat="list_categories 中的类别"><跨度>{{ 分类名称 }}</span><div class="checkbox"><标签><div ng-init="temp_result = get_Sub_Categories(category.category_id)"><p ng-repeat="temp_result 中的 sub_category">{{ sub_category.name }}</p>

在控制器中:

$scope.get_Sub_Categories = function(category_id) {$http({url: base_url + 'main/json_get_list_sub_categories',数据: {类别 ID:类别 ID},方法:POST"}).成功(功能(数据){返回数据；});}

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

尝试 2 - ng-click:(仅用于调试) 

<div class="col-sm-3"><h3>{{permission_group.permission_group_name}}
<div class="col-sm-9"><ul><li ng-repeat="list_categories 中的类别"><跨度>{{ 分类名称 }}</span><div class="checkbox"><标签><button ng-click="get_Sub_Categories(category.category_id)">获取子类别{{ list_sub_categories }}

在控制器中:

$scope.get_Sub_Categories = function(category_id) {$http({url: base_url + 'main/json_get_list_sub_categories',数据: {类别 ID:类别 ID},方法:POST"}).成功(功能(数据){$scope.list_sub_categories = 数据；});}

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

目标:

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

问题:

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

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

<代码>[{"sub_category_id": "1","name": "SUB_CATEGORY_1","category_id_parent": "1",状态":可见"}, {"sub_category_id": "2","name": "SUB_CATEGORY_2","category_id_parent": "1",状态":可见"}, {"sub_category_id": "3","name": "SUB_CATEGORY_3","category_id_parent": "1",状态":可见"}, {"sub_category_id": "4","name": "SUB_CATEGORY_4","category_id_parent": "1",状态":可见"}]

解决方案

调用 ng-repeat 中的函数与正常调用相同.由于您需要在页面加载时显示子类别，因此最好事先获取这些数据.异步加载子类别不适合这种情况.

这是实现此目的的最小片段(JS Fiddle)

<div ng-repeat="model.categories 中的类别"><跨度>类别:{{ category.name }} </span><p ng-repeat="subCategory in getSubCategories(category.Id)">{{ subCategory.name }}</p>

控制器

angular.module("app", []).controller('ctrl', ['$scope', function ($scope) {$scope.model = {类别:[{身份证":1，名称:'1'}, {身份证":2，名称:'2'}],子类别:[{父母ID":1，名称:'a1'}, {父母ID":1，名称:'a2'},{父母ID":2，名称:'a3'}]}$scope.getSubCategories = function(parentId){var 结果 = [];for(var i = 0 ; i <$scope.model.subCategories.length ; i++){if(parentId === $scope.model.subCategories[i].parentId){result.push($scope.model.subCategories[i]);}}控制台日志(parentId)返回结果；}}])

SITUATION:

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

First loop: display PERMISSION GROUP

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

Third loop: display SUB CATEGORIES

ISSUE:

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>

In the controller:

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

    });

}

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

ATTEMPT 2 - ng-click: (only for debug) 

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

In the controller:

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

    });

}

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.

THE AIM:

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.

THE QUESTION:

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.

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>

Controller

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

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆