在另一个 ng-repeat 中使用 ng-repeat [英] using ng-repeat inside another ng-repeat
问题描述
我正在开发一个页面，我需要在其中显示一些框(使用 ng-repeat)，其中包含频道信息及其显示位置(城市).
我面临的问题是当我重复第二个ng-repeat时:
这应该获得第一个 ng-repeat 的 $index 并创建一个新数组，其中包含将显示频道的位置.而它正是这样做的.但是，当我使用这个数组应用第二个 ng-repeat 时，它无法正常工作.
说我的html看起来是这样的(PS:我需要使用索引值而不是objCh.name，因为我将这些框放入列中)
<div class="box box-solid box-default" ng-repeat="(indexO, objCh) in objsCh track by indexO" ng-if="indexO%4==0 &&；指数0＜＝10″＞<div class="box-header"><div class="pull-left"><img src="dist/img/channels/{{ objsCh[indexO].pic }}" data-toggle="tooltip" title="" data-original-title="Alterar logo do canal"><h3 class="box-title">{{objsCh[(indexO)].name }}</h3><div class="box-tools pull-right"><button class="btn btn-box-tool" data-toggle="tooltip" title="" data-original-title="Adicionar ou Remover NIT"><i class="fa fa-plus"></i></button>
<div class="box-body"><table class="table table-condensed" ng-init="nitsCh = [objsCh[indexO].nit]">
<tr><th style="width: 10px">#</th><th>Nit</th></tr><tr ng-repeat="(indexN,nitCh) in nitsCh track by indexN"><td>{{objsCh[(indexO + 1)].nit[indexN].num }}</td><td>{{objsCh[(indexO + 1)].nit[indexN].name }}</td></tr></tbody>
JS 文件如下所示:
var app = angular.module('appApp', []);app.controller('ctrlApp', function($scope, $http) {var url = "includes/exibChNit.php";$http.get(url).success(function(response) {全部 = 响应；$scope.objsCh = all.channels;});});json 文件(由 php 创建)如下所示:
<代码>{频道":[{"id": "1","sid": "1","name": "频道","图片": "频道.jpg","crc32": "A1g423423B2",特别":0"，"网址": "",钥匙": ""，类型": ""，城市": [{"数量": "1","name": "圣保罗"}, {"数量": "2","name": "里约热内卢"}]}, {"id": "2","sid": "2","name": "频道 1","图片": "频道.jpg","crc32": "A1F5534234B2",特别":0"，"网址": "",钥匙": ""，类型": ""，城市": [{"数量": "1","name": "圣保罗"}, {"数量": "2","name": "里约热内卢"}]}]}当我尝试这个时它有效:
但我不能这样做，因为 json 节点将是动态的.
提前致谢！
解决方案 ng-repeat 创建自己的 $scope.
因此，对于内部 ng-repeat，您可以访问 $parent.$index，其中 $parent 是当前重复块的父作用域.
例如:
<li>{{section.name}}<ul><li ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">{{tutorial.name}}
Plunkr http://plnkr.co/edit/hOfAldNevxKzZQlxFfBn?p=preview
(从这个答案简化 在嵌套 ng 中传递 2 $index 值-重复)
I'm developing a page where I need to show some boxes (using ng-repeat) that contains info of channels and where it will be shown (which are cities).
The problem I am facing is when I repeat the second ng-repeat:
<table class="table table-condensed" ng-init="nitsCh = [objsCh[$index].nit]">
This should get the $index of first ng-repeat and create a new array with the places the channels will be shown. And it does exactly that. But, when I apply the second ng-repeat using this array, it doesn't work properly.
Said that my html looks like this (PS: I need to use the index value instead of objCh.name because I place these boxes into columns)
<div class="box box-solid box-default" ng-repeat="(indexO, objCh) in objsCh track by indexO" ng-if="indexO%4==0 && indexO<=10">
<div class="box-header">
<div class="pull-left">
<img src="dist/img/channels/{{ objsCh[indexO].pic }}" data-toggle="tooltip" title="" data-original-title="Alterar logo do canal">
<h3 class="box-title">{{ objsCh[(indexO)].name }}</h3>
</div>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-toggle="tooltip" title="" data-original-title="Adicionar ou Remover NIT"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="box-body">
<table class="table table-condensed" ng-init="nitsCh = [objsCh[indexO].nit]">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Nit</th>
</tr>
<tr ng-repeat="(indexN,nitCh) in nitsCh track by indexN">
<td>{{ objsCh[(indexO + 1)].nit[indexN].num }}</td>
<td>{{ objsCh[(indexO + 1)].nit[indexN].name }}</td>
</tr>
</tbody>
</table>
</div>
</div>
The JS file looks like this:
var app = angular.module('appApp', []);
app.controller('ctrlApp', function($scope, $http) {
var url = "includes/exibChNit.php";
$http.get(url).success(function(response) {
all = response;
$scope.objsCh = all.channels;
});
});
And the json file (that php create) looks like this:
{
"channels": [{
"id": "1",
"sid": "1",
"name": "Channel",
"pic": "channel.jpg",
"crc32": "A1g423423B2",
"special": "0",
"url": "",
"key": "",
"type": "",
"city": [{
"num": "1",
"name": "S�o Paulo"
}, {
"num": "2",
"name": "Rio de Janeiro"
}]
}, {
"id": "2",
"sid": "2",
"name": "CHannel 1",
"pic": "channel.jpg",
"crc32": "A1F5534234B2",
"special": "0",
"url": "",
"key": "",
"type": "",
"city": [{
"num": "1",
"name": "S�o Paulo"
}, {
"num": "2",
"name": "Rio de Janeiro"
}]
}]
}
When I try this it works:
<table class="table table-condensed" ng-init="nitsCh = [objsCh[($parent.$index + 1)].nit]">
But I can't make it this way because the json nodes will be dynamic.
Thanks in advance!
解决方案 ng-repeat's create their own $scope.
So, for the inner ng-repeats, you have access to $parent.$index, where $parent is the parent scope of the current repeat block.
For ex:
<ul ng-repeat="section in sections">
<li>
{{section.name}}
</li>
<ul>
<li ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
{{tutorial.name}}
</li>
</ul>
</ul>
Plunkr http://plnkr.co/edit/hOfAldNevxKzZQlxFfBn?p=preview
(simplified from this answer passing 2 $index values within nested ng-repeat)
这篇关于在另一个 ng-repeat 中使用 ng-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆