Angularjs - 如何使用嵌套的ng-repeat

时间:2017-01-30 07:26:38

标签: angularjs angularjs-ng-repeat

我有以下代码显示两个人的数据,即Roshan和Ashwin,并且有嵌套数组,显示有朋友姓名,常数,asalary,msalary等的数据。

allData = [{
        'id': '1',
        "name": "Roshan",
        "compname": [{
                "id": "1",
                "friend-name": "Ritik",
                "typeof": [{
                    "id": "2",
                    "constant": "per holiday"
                }],
                "salaries": [{
                    "id": "2",
                    "msalary": "1500",
                    "asalary": "18000"
                }]
            }, {
                "id": "2",
                "friendname": "Rohan",
                "typeof": [{
                    "id": "3",
                    "constant": "per employee"
                }],
                "salaries": [{
                    "id": "3",
                    "msalary": "18000",
                    "asalary": "25000"
                }]
            }
            ]
        },

        {
            "id": "2",
            "name": "Ashwin",
            "compname": [{
                    "id": "8",
                    "friend-name": "Amit",
                    "typeof": [{
                        "id": "9",
                        "constant": "per holiday"
                    }],
                    "salaries": [{
                        "id": "6",
                        "msalary": "11500",
                        "asalary": "118000"
                    }]
                }, {
                    "id": "23",
                    "friendname": "Kirti",
                    "typeof": [{
                        "id": "23",
                        "constant": "per employee"
                    }],
                    "salaries": [{
                        "id": "32",
                        "msalary": "180100",
                        "asalary": "253000"
                    }]
                }]
            }
        ]

我想要的。

我想使用ng repeat显示姓名,朋友姓名,常数,msalary和asalary。 我怎样才能做到这一点,帮助我。

5 个答案:

答案 0 :(得分:2)

你的Json在整个过程中并不一致。

<ul ng-repeat="ad in allData">
            <li>{{ad.name}}</li>
            <li>
                Friend Name
                <ul ng-repeat="cn in ad.compname">
                    <li>
                        {{cn['friend-name']}}</br>
                        Salaries
                        <ul ng-repeat="sal in cn.salaries">
                            <li>
                                MSalary: {{sal.msalary}}
                            </li>
                            <li>
                                ASalary: {{sal.asalary}}
                            </li>
                        </ul>
                    </li>
                </ul>


            </li>

        </ul>

如果要访问带有“连字符”( - )的json字段名称,则需要在其周围放置方括号[]。 希望这个例子有帮助

答案 1 :(得分:2)

一些观察结果:

  • 您的JSON无效。
  • 具有-friend-name)键的对象属性将其删除。

工作演示:

&#13;
&#13;
var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.allData = 
[{
	"id": "1",
	"name": "Roshan",
	"compname": [{
		"id": "1",
		"friendname": "Ritik",
		"typeof": [{
			"id": "2",
			"constant": "per holiday"
		}],
		"salaries": [{
			"id": "2",
			"msalary": "1500",
			"asalary": "18000"
		}]
	}, {
		"id": "2",
		"friendname": "Rohan",
		"typeof": [{
			"id": "3",
			"constant": "per employee"
		}],
		"salaries": [{
			"id": "3",
			"msalary": "18000",
			"asalary": "25000"
		}]
	}]
}, {
	"id": "2",
	"name": "Ashwin",
	"compname": [{
		"id": "8",
		"friendname": "Amit",
		"typeof": [{
			"id": "9",
			"constant": "per holiday"
		}],
		"salaries": [{
			"id": "6",
			"msalary": "11500",
			"asalary": "118000"
		}]
	}, {
		"id": "23",
		"friendname": "Kirti",
		"typeof": [{
			"id": "23",
			"constant": "per employee"
		}],
		"salaries": [{
			"id": "32",
			"msalary": "180100",
			"asalary": "253000"
		}]
	}]
}];
});
&#13;
span {
  color : red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <div ng-repeat="data in allData">
    <span>Name : </span>{{data.name}}
    <div ng-repeat="list in data.compname">
    <span>Friend Name : </span>{{list.friendname}}
      <div ng-repeat="leaveType in list.typeof">
      <span>Leave Type : </span>{{leaveType.constant}}
      </div>
      <div ng-repeat="salary in list.salaries">
      <span>Msalary : </span>{{salary.msalary}}
      <span>Asalary : </span>{{salary.asalary}}
      </div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:2)

起初你的Json有一些更正。缺少“]”更正版本如下,根据变量命名约定,变量名称中不能包含“ - ”

      $scope.allData = [{
            'id': '1',
            "name": "Roshan",
            "compname": [{
                    "id": "1",
                    "friend-name": "Ritik",
                    "typeof": [{
                        "id": "2",
                        "constant": "per holiday"
                    }],
                    "salaries": [{
                        "id": "2",
                        "msalary": "1500",
                        "asalary": "18000"
                    }]
                }, {
                    "id": "2",
                    "friendname": "Rohan",
                    "typeof": [{
                        "id": "3",
                        "constant": "per employee"
                    }],
                    "salaries": [{
                        "id": "3",
                        "msalary": "18000",
                        "asalary": "25000"
                    }]
                }
                ]
            },

            {
                "id": "2",
                "name": "Ashwin",
                "compname": [{
                        "id": "8",
                        "friend-name": "Amit",
                        "typeof": [{
                            "id": "9",
                            "constant": "per holiday"
                        }],
                        "salaries": [{
                            "id": "6",
                            "msalary": "11500",
                            "asalary": "118000"
                        }]
                    }, {
                        "id": "23",
                        "friendname": "Kirti",
                        "typeof": [{
                            "id": "23",
                            "constant": "per employee"
                        }],
                        "salaries": [{
                            "id": "32",
                            "msalary": "180100",
                            "asalary": "253000"
                        }]
                    }]
                }
            ]

<div ng-repeat="data in allData">
   <span>{{data.name}}</span>
   <div ng-repeat="companyName in data.compname">
      <span>{{companyName.friendName}}</span>
      <div ng-repeat="constantData in companyName.typeof">
         <span>{{constantData.constant}}</span>
         <div ng-repeat="salaryData in companyName.salaries">
            <span>{{salaryData.msalary}}</span><br/>
            <span>{{salaryData.asalary}}</span>
         </div>
      </div>
   </div>
   <br/>
</div>

我们必须记住的是JSON中的父子关系。例如,“alldata”是整体JSON的父级。“compname”是“typeof”,“薪水”等的父级。喜欢它应该显示。“常量”和“工资”div标签应该在“compname”div标签内,因为它们是“compname”的子项

答案 3 :(得分:1)

为ng-repeats和特定的Json使用div标签:

<div ng-repeat="data in allData">
    <div>Name : {{ data.name }}</div>
    <div ng-repeat="comp in data.compname">
        <div>{{comp.friendname}}</div>
        <div ng-repeat="type in comp.typeof">{{ type.constant }}</div>
        <div ng-repeat="salary in comp.salaries">{{ salary.msalary }} - {{ salary.asalary }}</div>
    </div>
</div>
PS:需要注意的一点 - 你的json存在不一致,在一个地方,属性名称是“friend-name”,而在另一个地方,它是“friendname”,这是不好的。

答案 4 :(得分:0)

在这里使用嵌套的ng-repeat是plunkr,我也纠正了你的json

   <div ng-repeat="data in allData">
       <div>Name : {{ data.name }}</div>
       <div ng-repeat="comp in data.compname">
           <div>{{comp.friendname}}</div>
           <span ng-repeat="type in comp.typeof">{{ type.constant }}</span>
           <span ng-repeat="salary in comp.salaries">
           <label>msalary:{{ salary.msalary }} </label><br>
           <label>asalary:{{ salary.asalary  }} </label></span>
       </div>
       <hr>
   </div>

SEE PLUNKR