テーブルのカラムをng-repeatで埋める方法

-1

通常、ng-repeatを持つテーブルでは、カラムではなくカラムを塗りつぶします。しかし、私の場合には、残念ながら、サーバーからの応答は次のようになります。テーブルのカラムをng-repeatで埋める方法

[ 
     [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}], 
     [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}], 
     [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}], 
     [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}], 
     ]

しかし、私は自分の列に名前を必要とする、彼らのコラムなどで年齢と私はそれが行のセルを繰り返しNGが、繰り返し使用しようとすると、列はありません。どのようにして列を1つ1つ、名前、年齢などで埋め込むことができますか？ここで

angular.module('App', []) 
 
    .controller('Ctrl', function($scope) { 
 
    $scope.arr = [ 
 
     [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}], 
 
     [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}], 
 
     [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}], 
 
     [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}], 
 
     ] 
 
    });

.tg {border-collapse:collapse;border-spacing:0;} 
 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
 
.tg .tg-s6z2{text-align:center}

<!DOCTYPE html> 
 
<html ng-app="App"> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="Ctrl"> 
 

 
    <table class="tg"> 
 
     <tr> 
 
     <th class="tg-s6z2">name</th> 
 
     <th class="tg-s6z2">age</th> 
 
     <th class="tg-s6z2">sex</th> 
 
     <th class="tg-s6z2">eyes color</th> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     <td class="tg-s6z2"></td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 

 
</html>

出典

2017-02-14 YoroDiallo

ここでは、指定したJSONの要件があります。

ng-repeatの力を使用して、$indexを使用してソリューションを完成させることができます。

angular.module('App', []) 
 
    .controller('Ctrl', function($scope) { 
 
    $scope.arr = [ 
 
     [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}], 
 
     [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}], 
 
     [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}], 
 
     [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}], 
 
     ] 
 
    });

.tg {border-collapse:collapse;border-spacing:0;} 
 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
 
.tg .tg-s6z2{text-align:center}

<!DOCTYPE html> 
 
<html ng-app="App"> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="Ctrl"> 
 

 
    <table class="tg"> 
 
     <tr> 
 
     <th class="tg-s6z2">name</th> 
 
     <th class="tg-s6z2">age</th> 
 
     <th class="tg-s6z2">sex</th> 
 
     <th class="tg-s6z2">eyes color</th> 
 
     </tr> 
 
     <tr ng-repeat="a in arr[0]"> 
 
     <td class="tg-s6z2">{{a.name}}</td> 
 
     <td class="tg-s6z2">{{arr[1][$index].age}}</td> 
 
     <td class="tg-s6z2">{{arr[2][$index].sex}}</td> 
 
     <td class="tg-s6z2">{{arr[3][$index].eyes}}</td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 

 
</html>

あなたが最良でしょう、あなたのデータの形式を（変更するには、サーバーへのアクセスを持っていない場合は上のコード

HERE IS A WORKING DEMO

出典

2017-02-14 11:09:34 Sravan

angular.module('App', []) 
 
    .controller('Ctrl', function($scope) { 
 
    $scope.arr = [ 
 
     [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}], 
 
     [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}], 
 
     [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}], 
 
     [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}], 
 
     ] 
 
    });

.tg {border-collapse:collapse;border-spacing:0;} 
 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
 
.tg .tg-s6z2{text-align:center}

<!DOCTYPE html> 
 
<html ng-app="App"> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="Ctrl"> 
 

 
    <table class="tg"> 
 
     <tr> 
 
     <th class="tg-s6z2">name</th> 
 
     <th class="tg-s6z2">age</th> 
 
     <th class="tg-s6z2">sex</th> 
 
     <th class="tg-s6z2">eyes color</th> 
 
     </tr> 
 
     <tr ng-repeat="a in arr"> 
 
     
 
     <td class="tg-s6z2">{{a.name}}</td> 
 
     <td class="tg-s6z2">{{a.age}}</td> 
 
     <td class="tg-s6z2">{{a.sex}}</td> 
 
     <td class="tg-s6z2">{{a.eyes}}</td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 

 
</html>

出典

2017-02-14 10:57:34

、クーゼNGリピートARRの戻り配列名前の配列には.age、.sex、および.eyesはありません。 – YoroDiallo

あなたが行く：http://codepen.io/DaniloPolani/pen/BpMrvg

ロジックが配列の角度で（インデックスを保存反復することです、あなたがこれを行うことができますtrack by $index）。

このインデックスでは、各プロパティの正しい配列位置（arr[0][$index].name、arr[0]は名前の配列、$indexは現在の要素の位置）を取得できます。詳細はhereでご覧いただけます。

しかし、あなたの配列を編集してください。コードと目には、すべてのパラメータで連想配列を作成する方が良いです。したがって、目、名前などの配列の配列。

$scope.arr = [ 
    { 
    name: 'John', 
    eyes: 'brown' 
    } 
];

出典

2017-02-14 11:03:09 Grork

残念ながら、私の組織の応答では、このビューがあります。おそらく私はそれを変更できますが、それは望ましくありません:( – YoroDiallo

それを想像して、とにかく私は上記のコードを理解することを望む！ – Grork

y es、あなたの助けをたくさんthx、私はあなたの方法を試してみましょう！ – YoroDiallo

を実行してくださいソリューション）、カスタム関数を使用し、コントローラで適切にフォーマットします。 formatArrayで

あなたは検索機能を有効にする、などのOrderByなどのフィルタを、使用することができます、 "のなど

angular.module('App', []) 
 
    .controller('Ctrl', function($scope) { 
 
    $scope.arr = [ 
 
     [{name:'John'},{name:'Sarah'},{name:'Ann'},{name:'Josh'},{name:'Mike'},{name:'Olaf'},{name:'Jane'},{name:'Rachel'},{name:'Hank'},{name:'Nick'}], 
 
     [{age:'23'},{age:'41'},{age:'23'},{age:'14'},{age:'42'},{age:'32'},{age:'12'},{age:'65'},{age:'32'},{age:'21'}], 
 
     [{sex:'female'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'},{sex:'male'},{sex:'female'},{sex:'female'},{sex:'male'},{sex:'male'}], 
 
     [{eyes:'brown'},{eyes:'green'},{eyes:'blue'},{eyes:'blue'},{eyes:'grey'},{eyes:'green'},{eyes:'brown'},{eyes:'brown'},{eyes:'blue'},{eyes:'brown'}], 
 
     ] 
 

 

 
    var formatArray = function (arr) { 
 
     var formated = []; 
 

 
     for (var i = 0; i < arr.length; i++) { 
 
     for (var j = 0; j < arr[i].length; j++) { 
 
      if (!formated[j] && formated.length === j) { 
 
      formated.push({}); 
 
      } 
 
      for (prop in arr[i][j]) { 
 

 
      formated[j][prop] = arr[i][j][prop]; 
 
      } 
 
     } 
 
     } 
 

 
     return formated; 
 
    }; 
 

 
    $scope.formatedArray = formatArray($scope.arr); 
 
    });

.tg {border-collapse:collapse;border-spacing:0;} 
 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
 
.tg .tg-s6z2{text-align:center}

<!DOCTYPE html> 
 
<html ng-app="App"> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-controller="Ctrl"> 
 

 
    <table class="tg"> 
 
     <tr> 
 
     <th class="tg-s6z2">name</th> 
 
     <th class="tg-s6z2">age</th> 
 
     <th class="tg-s6z2">sex</th> 
 
     <th class="tg-s6z2">eyes color</th> 
 
     </tr> 
 
     <tr ng-repeat="item in formatedArray"> 
 
     <td class="tg-s6z2" ng-bind="item.name"></td> 
 
     <td class="tg-s6z2" ng-bind="item.age"></td> 
 
     <td class="tg-s6z2" ng-bind="item.sex"></td> 
 
     <td class="tg-s6z2" ng-bind="item.eyes"></td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 

 
</html>

それは働いていない

出典

2017-02-14 11:32:09 TheSameSon

テーブルのカラムをng-repeatで埋める方法

答えて

関連する問題