[英]AngularJS nested ng-repeat
I have a html like this : 我有一个像这样的HTML:
<div class="fields-plan"data-ng-repeat="roomname in assign.roomname">
<section>
<span>Room: {{roomname}}</span>
</section>
<ul data-ng-repeat="room in assign.rooms.roomname">
<li>
{{room.room}}
</li>
<ul>
</div>
and my angular controller look like this: 我的角度控制器看起来像这样:
var room = {"1.2":
[
{room: "1.2.1"},
{room: "1.2.2"},
{room: "1.2.3"}
],
"1.3": [
{room: "1.3.1"},
{room: "1.3.2"},
{room: "1.3.3"}
]};
var keys = Object.keys(room);
this.roomname = keys;
this.rooms = room;
In my second ng repeat, it doesn't work and how can i loop based on roomname, that output from the first ng repeat?? 在我的第二次重复,它不起作用,我如何循环基于房间名称,从第一次ng重复的输出?
Your second ng-repeat needs to take the first ng-repeat value instead of directly taking the room name, so your second ng-repeat should look like this: 你的第二个ng-repeat需要取第一个ng-repeat值而不是直接取房间名,所以你的第二个ng-repeat应该是这样的:
Code: 码:
<div class="fields-plan"data-ng-repeat="(key, value) in assign.rooms">
<section>
<span>Room: {{key}}</span>
</section>
<ul data-ng-repeat="room in value">
<li>
{{room.room}}
</li>
<ul>
</div>
You can achieve this by slightly reformatting your Json and then using the following code: 您可以通过稍微重新格式化Json然后使用以下代码来实现此目的:
The key is to use the value of the first ng-repeat in the second ng-repeat and not trying to reference the first collection. 关键是要使用第二个ng-repeat中第一个ng-repeat的值,而不是尝试引用第一个集合。
html: HTML:
<div ng-controller="MyCtrl">
<div class="fields-plan" ng-repeat="room in rooms">
<section>
<span>Room: {{room.name}}</span>
</section>
<ul ng-repeat="subroom in room">
<li>
{{room.subRoom}}
</li>
<ul>
</div>
</div>
javascript: JavaScript的:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.rooms = [ { name : "1.2",
subRoom: [
"1.2.1","1.2.2","1.2.3"],
}, { name: "1.3",
subRoom: [
"1.3.1","1.3.2","1.3.3"]}];
}
Fiddle demo: http://jsfiddle.net/0pnam0wj/ 小提琴演示: http : //jsfiddle.net/0pnam0wj/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.