Angular 循环内重复

Question

我在控制器中有以下代码，我已成功循环基于主要 xml 的数据，但我无法成功传递次级子数据（在第二级 tr 标签中，我希望所有 "list" 类别重复）循环中的数据。

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>

我无法在里面重复

Answer 1

据我了解，对于你想要的东西，你必须先将文本文件更改为此。

     { "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 now list is a List Of birds(鸟类的信息)，它会帮助你在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>

希望对您有所帮助

Angular 循环内重复

Angular ng-repeat inside loop

angularjs

ng-repeat