Angular ng-repeat在HTML表格中打印數組值

我在我的app.js文件中有一個數組，我希望在我的HTML表格中按順序打印<td>行中的內容。下面是我的app.js文件：Angular ng-repeat在HTML表格中打印數組值

(function() { 
var app = angular.module('TravelI', []); 

var route = [{ 
    source : [ 
     "San Jose", 
     "San Francisco", 
    ], 

    destination : [ 
     "Wellington", 
     "Mumbai" 
    ], 


}]; 
app.controller('RouteController', function ($scope) { 
    $scope.product = route; 

    $scope.addRoute = function(s, d) { 

    }; 

}); 

})();

HTML代碼：

<div id="DisplayTable" ng-repeat="x in product"> 
     <table style="width: 80%" align="center"> 
      <tr> 
       <th> 
        From 
       </th> 
       <th> 
        To 
       </th> 
      </tr> 
      <tr> 
       <td>{{x.source[$index]}}</td> 
       <td>{{x.destination[$index]}}</td> 
      </tr> 
     </table> 
    </div>

現在我只能看到正確的數據在陣列中的第一個元素。我想顯示器是這樣的：

From       To: 
San Jose      Wellington 
San Francisco    Mumbai

我追加到兩個數組的任何城市都應該順序顯示在表格行中。

目前我只能看到第一個元素在兩個數組：

來源

2016-09-28 Anuvrat Tiku

在打印只有一排，因爲你的product.length是1.您通過product.source必須循環。 –

要麼你必須重新設置$ scope.product是一個鍵值對，否則你可以做到這一點，假設它總是會是兩個值，

<table style="width: 80%" align="center"> 
      <tr> 
       <th> 
        From 
       </th> 
       <th> 
        To 
       </th> 
      </tr> 
      <tr> 
       <td>{{x.source[$index]}}</td> 
       <td>{{x.destination[$index]}}</td> 

      </tr> 
      <tr> 
       <td>{{x.source[$index+1]}}</td> 
       <td>{{x.destination[$index+1]}}</td> 

      </tr> 
     </table>

編輯：

<div id="DisplayTable" ng-repeat="x in product"> 
    <table style="width: 80%" align="center"> 
     <tr> 
     <th> 
      From 
     </th> 
     <th> 
      To 
     </th> 
     </tr> 
     <tr> 
     <td ng-repeat="y in x.source">{{y}}</td> 
     </tr> 
     <tr> 
     <td ng-repeat="y in x.destination">{{y}}</td> 
     </tr> 
    </table> 
    </div>

DEMO

來源

2016-09-28 02:59:17 Sajeetharan

是否可以使用變量增加HTML頁面中的值，以便每次將新元素添加到數組中時，該值也會反映在表中。 –

查看更新的演示 – Sajeetharan

您是否檢查過更新的運行？ – Sajeetharan

如果route.source.length === route.destination.length在您的航線上，您可以試試這個。

(function() { 
 
     var app = angular.module('TravelI', []); 
 

 
     var route = [{ 
 
      source : [ 
 
       "San Jose", 
 
       "San Francisco", 
 
       "src A", 
 
       "src B" 
 
      ], 
 

 
      destination : [ 
 
       "Wellington", 
 
       "Mumbai", 
 
       "des A", 
 
       "des B" 
 
      ] 
 
     }]; 
 
     app.controller('RouteController', function ($scope) { 
 
      $scope.product = route; 
 

 
      $scope.addRoute = function(s, d) { 
 

 
      }; 
 

 
     }); 
 

 
    })();

<!DOCTYPE html> 
 
<html lang="en" ng-app="TravelI"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Angular Snippet</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="DisplayTable" ng-controller="RouteController"> 
 
    <table style="width: 80%" align="center" ng-repeat="x in product"> 
 
     <tr> 
 
      <th> 
 
       From 
 
      </th> 
 
      <th> 
 
       To 
 
      </th> 
 
     </tr> 
 
     <!-- I saw $scope.addRoute() has two arguments --> 
 
     <!-- so, I assumed that source.length === destination.length --> 
 
     <tr ng-repeat="src in x.source track by $index"> 
 
      <td>{{x.source[$index]}}</td> 
 
      <td>{{x.destination[$index]}}</td> 
 
     </tr> 
 

 
    </table> 
 
</div> 
 
</body> 
 
</html>

來源

2016-09-28 03:22:45

Angular ng-repeat在HTML表格中打印數組值

回答

相關問題