情况:
我正在 AngularJs 中制作一个分配权限的应用程序。 为了做到这一点,我有三个嵌套的 ng-repeat。
第一个循环:显示权限组
第二个循环:为每个权限组显示 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>
在 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;
});
}
行为很奇怪。可能是由于脏检查页面被加载了 682 次。 没有显示结果。
尝试 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>
在 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;
});
}
这次页面只加载一次。 如果我按下按钮,则会显示正确的子类别,但当然不仅针对相应的类别,而且针对所有类别,因为我正在修改全局范围内的 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>
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;
}}])
关于javascript - 如何在 ng-repeat 中正确执行函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26399783/