大佬教程收集整理的这篇文章主要介绍了如何在ng-repeat中正确执行功能,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在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;
}}])
情况:
我正在AngularJs中制作一个分配权限的应用程序。为了做到这一点,我有三个嵌套的ng-repeat。
第一循环@H_607_28@ :显示PERMISSION GROUP
第二个循环@H_607_28@ :对于每个权限组,显示“类别”。在此循环内执行一个函数,该函数将获取每个类别的所有子类别
第三循环@H_607_28@ :显示子类别
问题:
问题在于第二个循环内函数的执行。
尝试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',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",{
"sub_category_id": "3","name": "SUB_CATEGORY_3",{
"sub_category_id": "4","name": "SUB_CATEGORY_4","status": "VISIBLE"
}]
以上是大佬教程为你收集整理的如何在ng-repeat中正确执行功能全部内容,希望文章能够帮你解决如何在ng-repeat中正确执行功能所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。