如何正确执行ng repeat中的函数


How to properly execute a function inside ng-repeat

情况:

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

第一个循环:显示许可组

第二个循环:对于每个权限组,显示CATEGORIES。在这个循环中执行一个函数,该函数将获得每个类别的所有子类别

第三个循环:显示子类别

问题:

问题出在第二个循环中函数的执行过程中。

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

在控制器中:

$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次。没有显示结果。

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

在控制器中:

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

目标:

我想要获得的只是简单地显示每个类别的所有适当的子类别。不使用按钮,只需在页面加载后立即查看所有正确的内容。但我不明白在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"
}]

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

以下是实现这个(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 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' }
        });
    });

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

你可以在这里看到一个在ng重复中使用的指令示例:Angular directive Do Not Evaluate Inside ng repeat

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

我会为category创建一个工厂,然后将get_sub_categories函数移到这个新工厂中。