Iç içe geçmiş ng-yinele Angular JS tablosunda

Angular JS için bir yeni kullanıcıyım. Model koleksiyonunu kullanarak yinelemeyi deniyorum ve bir tabloda aynı şeyi görüntüliyorum.Iç içe geçmiş ng-yinele Angular JS tablosunda

Modeli gibi görünür:

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; 
       });

Ve tablo yapısı

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

olmak istiyorum Ama html sayfası aynı yapamadık.

Şimdiye kadar kod şöyle görünür: Aynı ulaşmak için yapmanız gerekenler

<!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>

? Lütfen açıkla.

kaynak

2016-03-26 StrugglingCoder

bunu deneyin. satır yerine td'ye tekrarlama yapmalısınız.

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>

kaynak

2016-03-26 17:28:27

Cevabınız size cevap vermeniz için yardım ederseniz, lütfen cevabınız için çok teşekkür ederim :) – StrugglingCoder

. Teşekkürler. –

tekrar biraz ve ihtiyacınız gibi çalışır.

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>

kaynak

2016-03-26 17:44:58

Herşey HTML'nize dışında gayet iyi.

Sizin ilk <td>

tbody burada bazı yanıtlar tarafından görüldüğü gibi tekrar edilmesi gerekiyordu değil ikinci biri olmalıdır <tr>

için ülkeler olması gerektiği için ng-repeat. w3c HTML5 Specs tbodytbody gereğince sadece ng-repeat o özellik olarak belirtilen olduğu elemanını tekrar edecektir unutmayın doğru yolda olduğu thead

sonra tek unsurdur.

<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>

kaynak

2016-03-26 17:45:24 bhantol

Iç içe geçmiş ng-yinele Angular JS tablosunda

cevap

İlgili konular