Angular JSテーブルのネストされたng-repeat

私はAngular JSの初心者です。私はモデルコレクションを通して反復処理を試み、同じものをテーブルに表示しています。Angular JSテーブルのネストされたng-repeat

モデルは次のようになります。

var myModule = angular 
       .module("myModule", []) 
       .controller("myController", function ($scope) { 
        var countries = [ 
         { 
          name: "UK", 
          cities: [ 
            {name: "London"}, 
            {name: "Birmingham" }, 
            {name: "Manchestar" } 
          ], 
          flag:"/Images/UK.gif" 
         }, 
         { 
          name: "USA", 
          cities: [ 
            {name: "Los Angeles"}, 
            {name: "Houston"}, 
            {name: "Florida"}, 
          ], 
          flag:"/Images/USA.png" 
         } 
        ]; 
        $scope.countries = countries; 
       });

そして私はテーブル構造が

Country City1 City2  City3  Flag 
UK  London Birmingham Manchestar ..... 
USA  ...... ......... ......... .....

になりたいしかし、私はhtmlページで同じことを行うことができませんでした。

は、これまでのコードは次のようになります。私は同じことを達成するために必要な何

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule"> 
<head> 
    <title></title> 
    <script src="Scripts/angular.js"></script> 
    <script src="Scripts/MyModuleScript.js"></script> 
</head> 
<body ng-controller="myController"> 
    <div> 
     <table> 
      <thead> 
       <tr> 
        <th>Country</th> 
        <th>City 1</th> 
        <th>City 2</th> 
        <th>City 3</th> 
        <th>Flag</th> 
       </tr> 
      </thead> 
      <tbody ng-repeat="country in countries"> 
       <tr ng-repeat="city in country.cities"> 
        <td>{{ country.name }}</td> 
        <td> 
         {{......}} 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</body> 
</html>

？説明してください。

出典

2016-03-26 StrugglingCoder

これを試してください。行の代わりにtdにng-repeatを置く必要があります。

var myModule = angular 
 
       .module("myModule", []) 
 
       .controller("myController", function ($scope) { 
 
        $scope.countries = [ 
 
         { 
 
          name: "UK", 
 
          cities: [ 
 
            {name: "London"}, 
 
            {name: "Birmingham" }, 
 
            {name: "Manchestar" } 
 
          ], 
 
          flag:"/Images/UK.gif" 
 
         }, 
 
         { 
 
          name: "USA", 
 
          cities: [ 
 
            {name: "Los Angeles"}, 
 
            {name: "Houston"}, 
 
            {name: "Florida"}, 
 
          ], 
 
          flag:"/Images/USA.png" 
 
         } 
 
        ]; 
 
        
 
       });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myModule" ng-controller="myController"> 
 
    <div> 
 
     <table> 
 
      <thead> 
 
       <tr> 
 
        <th>Country</th> 
 
        <th>City 1</th> 
 
        <th>City 2</th> 
 
        <th>City 3</th> 
 
        <th>Flag</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody ng-repeat="country in countries"> 
 
       <tr> 
 
        <td>{{ country.name }}</td> 
 
        <td ng-repeat="city in country.cities"> 
 
         {{city.name}} 
 
        </td> 
 
        <td><img ng-src="{{country.flag}}"></td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div>

出典

2016-03-26 17:28:27

ご質問ありがとうございます。 – StrugglingCoder

私の回答が受け入れる手助けをしてくれれば幸いです。ありがとう。 –

少しを繰り返し、あなたがそれを必要とそれが動作します。

var myModule = angular 
 
       .module("myModule", []) 
 
       .controller("myController", function ($scope) { 
 
        var countries = [ 
 
         { 
 
          name: "UK", 
 
          cities: [ 
 
            {name: "London"}, 
 
            {name: "Birmingham" }, 
 
            {name: "Manchestar" } 
 
          ], 
 
          flag:"/Images/UK.gif" 
 
         }, 
 
         { 
 
          name: "USA", 
 
          cities: [ 
 
            {name: "Los Angeles"}, 
 
            {name: "Houston"}, 
 
            {name: "Florida"}, 
 
          ], 
 
          flag:"/Images/USA.png" 
 
         } 
 
        ]; 
 
        $scope.countries = countries; 
 
       });

var myModule = angular 
 
       .module("myModule", []) 
 
       .controller("myController", function ($scope) { 
 
        var countries = [ 
 
         { 
 
          name: "UK", 
 
          cities: [ 
 
            {name: "London"}, 
 
            {name: "Birmingham" }, 
 
            {name: "Manchestar" } 
 
          ], 
 
          flag:"/Images/UK.gif" 
 
         }, 
 
         { 
 
          name: "USA", 
 
          cities: [ 
 
            {name: "Los Angeles"}, 
 
            {name: "Houston"}, 
 
            {name: "Florida"}, 
 
          ], 
 
          flag:"/Images/USA.png" 
 
         } 
 
        ]; 
 
        $scope.countries = countries; 
 
       });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myModule"> 
 
<head> 
 
    <title></title> 
 
    <script src="Scripts/angular.js"></script> 
 
    
 
</head> 
 
<body ng-controller="myController"> 
 
    <div> 
 
     <table> 
 
      <thead> 
 
       <tr> 
 
        <th>Country</th> 
 
        <th>City 1</th> 
 
        <th>City 2</th> 
 
        <th>City 3</th> 
 
        <th>Flag</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody ng-repeat="country in countries"> 
 
       
 
       <tr >      
 
        <td >{{ country.name }}</td> 
 
        <td ng-repeat="city in country.cities"> 
 
         {{city.name}} 
 
        </td> 
 
        <td><img ng-src="{{country.flag}}"></td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</body> 
 
</html>

<tbody ng-repeat="country in countries">   
       <tr >      
        <td >{{ country.name }}</td> 
        <td ng-repeat="city in country.cities"> 
         {{city.name}} 
        </td> 
        <td><img ng-src="{{country.flag}}"></td> 
       </tr> 
      </tbody>

出典

2016-03-26 17:44:58

すべてはあなたのHTMLを除いて結構です。

国のためにあなたの最初ng-repeatが二つ<td>

tbodyのためにあるべき<tr>

のためにする必要がありますが、ここでの回答の一部で見られるように繰り返されることになっていません。 w3c HTML5 Specs tbodytbodyあたりとしてだけng-repeatは、それが属性として指定されている要素を繰り返すことになりますことを覚えておいてくださいあなたは正しい軌道に乗っているthead

後に単一の要素です。

<tbody>   
     <tr ng-repeat="country in countries">      
      <td >{{ country.name }}</td> 
      <td ng-repeat="city in country.cities"> 
       {{city.name}} 
      </td> 
      <td><img ng-src="{{country.flag}}"></td> 
     </tr> 
    </tbody>

出典

2016-03-26 17:45:24 bhantol

Angular JSテーブルのネストされたng-repeat

答えて

関連する問題