angularjs - Angular ng-repeat inside loop -
i have following code in controller, have succeeded loop primary xml based data not succeeded pass secondary child (in second level tr tag want "list" category repeat) data in loop.
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); }); }]); below txt file data exist
{ "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" } }] } and below html code
<!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> i not repeat inside
as understood,for want yo have first change text file .
{ "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" }] }] } here list list of birds(information of birds),it repeat in html
and html, change this.
<!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> hope
Comments
Post a Comment