情况:
我正在AngularJs中制作一个分配权限的应用程序。为了做到这一点,我有三个嵌套的ng-repeat。
第一循环 :显示PERMISSION GROUP
第二个循环 :对于每个权限组,显示“类别”。在此循环内执行一个函数,该函数将获取每个类别的所有子类别
第三循环 :显示子类别
问题:
问题在于第二个循环内函数的执行。
尝试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; }); }
这次页面仅加载一次。如果我按下按钮,则会显示适当的子类别,但不仅会显示相应类别,还会显示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; }}])