Angularjs 内环角重复
我在控制器中有以下代码,我成功地循环了主要的基于xml的数据,但我无法成功地在循环中传递次要的子级(在第二级tr标记中,我希望所有“列表”类别重复)数据Angularjs 内环角重复,angularjs,ng-repeat,Angularjs,Ng Repeat,我在控制器中有以下代码,我成功地循环了主要的基于xml的数据,但我无法成功地在循环中传递次要的子级(在第二级tr标记中,我希望所有“列表”类别重复)数据 angular.module('birdsApp.controllers', []). controller("birdssController", ['$scope','$http', function($scope, $http) { $scope.nameFilter = null; $scope.searchF
angular.module('birdsApp.controllers', []).
controller("birdssController", ['$scope','$http', function($scope, $http)
{
$scope.nameFilter = null;
$scope.searchFilter = function (writer) {
var keyword = new RegExp($scope.nameFilter, 'i');
return !$scope.nameFilter || keyword.test(birdfinder[1]);
}; //$http.get('http://localhost/rnd/js/angular/sample_app/app/driverStandings.json?callback=JSON_CALLBACK').success (function(data){
//$scope.driversList = data.StandingsLists[0].DriverStandings;
$http.get('app/demo2.txt?callback=JSON_CALLBACK').success (function(data){
$scope.birdfinderlist = data.aaData;
//console.log(data.aaData);
//$scope.birdfinderlist2 = data.aaData.list;
console.log(data.aaData[1].list.bird_englishname);
});
}]);
下面是我的txt文件,其中包含所有数据
{ "aaData":
[{
"birdcategory_english":"Gaviidae",
"birdcategory_scientific":"Divers",
"list":
{
"bird_englishname":"Red-throated Diver",
"bird_img":"Red-throated Diver.jpg",
"bird_scename":"Gavia stellata",
"bird_marathi":"समुद्री पाणबुडी "
}
},
{
"birdcategory_english":"Podicipedidae",
"birdcategory_scientific":"Grebes",
"list":
{
"bird_englishname":"Little Grebe",
"bird_img":"Red-throated Diver.jpg",
"bird_scename":"Tachybaptus ruficollis",
"bird_marathi":"दिबुकली"
},
"list":
{
"bird_englishname":"Great Crested Grebe",
"bird_img":"Red-throated Diver.jpg",
"bird_scename":"Podiceps cristatus",
"bird_marathi":"दिबुकली 2"
}
},
{
"birdcategory_english":"",
"birdcategory_scientific":"",
"list":
{
"bird_englishname":"Great Crested Grebe2",
"bird_img":"Red-throated Diver.jpg",
"bird_scename":"Podiceps cristatus2",
"bird_marathi":"दिबुकली 2"
}
}]
}
下面是html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Birds Names</title>
</head>
<body ng-app="birdsApp" ng-controller="birdssController">
<input type="text" ng-model="nameFilter" placeholder="Search..."/>
<table width="100%">
<thead>
<tr>
<td>No.</td>
<td>English Name</td>
<td> </td>
<td>Scientific Name</td>
<td>Marathi Name</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="birdfinder in birdfinderlist | filter: nameFilter">
<td>
<table width="100%">
<tr class="first_row">
<td></td>
<td>{{birdfinder.birdcategory_english}}</td>
<td></td>
<td>{{birdfinder.birdcategory_scientific}}</td>
<td></td>
</tr>
<tr>
<td>{{$index + 1}}</td>
<td>{{birdfinder.list.bird_englishname}}</td>
<td><img src="images/{{birdfinder.list.bird_img}}"></td>
<td>{{birdfinder.list.bird_scename}}</td>
<td>{{birdfinder.list.bird_marathi}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
鸟名
不
英文名称
学名
马拉地语名
{{birdfinder.birdcategory_english}
{{birdfinder.birdcategory_scientific}
{{$index+1}}
{{birdfinder.list.bird_englishname}
{{birdfinder.list.bird_scename}
{{birdfinder.list.bird_marathi}}
据我所知,我无法在内重复,因为您需要首先将文本文件更改为此
{ "aaData":
[{
"birdcategory_english":"Gaviidae",
"birdcategory_scientific":"Divers",
"list":[
{
"bird_englishname":"Red-throated Diver",
"bird_img":"Red-throated Diver.jpg",
"bird_scename":"Gavia stellata",
"bird_marathi":"समुद्री पाणबुडी "
}]
},
{
"birdcategory_english":"Podicipedidae",
"birdcategory_scientific":"Grebes",
"list":[
{
"bird_englishname":"Little Grebe",
"bird_img":"Red-throated Diver.jpg",
"bird_scename":"Tachybaptus ruficollis",
"bird_marathi":"दिबुकली"
},
{
"bird_englishname":"Great Crested Grebe",
"bird_img":"Red-throated Diver.jpg",
"bird_scename":"Podiceps cristatus",
"bird_marathi":"दिबुकली 2"
}]
},
{
"birdcategory_english":"",
"birdcategory_scientific":"",
"list":[
{
"bird_englishname":"Great Crested Grebe2",
"bird_img":"Red-throated Diver.jpg",
"bird_scename":"Podiceps cristatus2",
"bird_marathi":"दिबुकली 2"
}]
}]
}
现在这里的列表是一个鸟类列表(鸟类信息),它将帮助您在html中重复它
对于你的Html,像这样改变它
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Birds Names</title>
</head>
<body ng-app="birdsApp" ng-controller="birdssController">
<input type="text" ng-model="nameFilter" placeholder="Search..."/>
<table width="100%">
<thead>
<tr>
<td>No.</td>
<td>English Name</td>
<td> </td>
<td>Scientific Name</td>
<td>Marathi Name</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="birdfinder in birdfinderlist | filter: nameFilter">
<td>
<table width="100%">
<tr class="first_row">
<td></td>
<td>{{birdfinder.birdcategory_english}}</td>
<td></td>
<td>{{birdfinder.birdcategory_scientific}}</td>
<td></td>
</tr>
<tr ng-repeat="bird in birdfinder.list">
<td>{{$index + 1}}</td>
<td>{{bird.bird_englishname}}</td>
<td><img src="images/{{bird.bird_img}}"></td>
<td>{{bird.bird_scename}}</td>
<td>{{bird.bird_marathi}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
鸟名
不
英文名称
学名
马拉地语名
{{birdfinder.birdcategory_english}
{{birdfinder.birdcategory_scientific}
{{$index+1}}
{{bird.bird{u englishname}
{{bird.bird_scename}
{{伯德,伯德{马拉蒂}
希望它能帮助您请与表格共享完整的html我已经完成了html复制编辑您面临的问题,或者有什么错误。在哪一条线上?你想做什么,在哪里。请把这些事情弄清楚。你想要“所有列表类别重复”。但是每个bird对象内部的“列表”并不是一个真正的列表,它只是一个具有固定数量属性的对象。没有什么可重复的。非常感谢@Viplock先生:)上帝保佑你,我正在为我所在州的鸟类网页指南列表工作,这项工作将对所有州鸟类爱好者有用。:)