如何正确执行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函数移到这个新工厂中。
- 想要将ng个repeat对象传递给自定义筛选函数
- AngularJS ng repeat显示原型函数未定义
- 将jquery函数添加到Angular ng repeat中
- ng使用一个不识别临时变量形式ng repeat的函数绑定html
- 如何将 ng-repeat 变量的值传递到 input[“file”] 的 onchange 函数中
- Angular 1.3 中是否有更好的模式,可以在每次修改 ng-repeat 中的项目时调用函数
- 将 'ng-repeat' 元素传递给 javascript 函数
- 如何在 ng-repeat中启动每个函数
- AngularJS:在ng-repeat中调用控制器函数
- ng-禁用函数调用在 ng-repeat 下处于无限循环中
- 角度 - 我可以在嵌套的 ng-repeat 中的多个对象上使用单个函数来触发该对象的 ng-show 吗?
- 当ng-repeat完成时调用javascript函数
- ng-repeat中的函数不断循环
- 来自嵌套 ng-repeat 的函数调用
- Angular:如何在ng repeat指令中使用自定义函数
- 用ng repeat调用函数
- 在AngularJS中使用ng repeat调用和迭代函数返回值
- 如何正确执行ng repeat中的函数
- 将AngularJS对象值从ng repeat传递给AngularJS函数
- Q: 如何在AngularJs中使用ng repeat onClick执行带param的函数