テーブル内のネストされたオブジェクトをレンダリングします

Question

私はこのようなjavascriptオブジェクトを持っています。

$scope.allPlayers = { 
     jack: { 
      player1: { 
       name: "abd", 
       country: "SA", 
       totalpoints: 100 
      }, 

      player2: { 
       name: "tahir", 
       country: "SA", 
       totalpoints: 100 
      } 
     }, 
     john: { 
      player1: { 
       name: "duminy", 
       country: "SA", 
       totalpoints: 100 
      }, 

      player2: { 
       name: "morris", 
       country: "SA", 
       totalpoints: 100 
      } 
     }, 

Iは、それらの対応する値とname、countryとpointsとしてヘッダを持つテーブルを作成したいと思います。そして、ジャックとジョンのためにそれぞれ一つのテーブルを作りなさい。

<div ng-repeat="(person,players) in allPlayers"> 
     <div ng-repeat="(playername,playerinfo) in players"> 
      <table> 
       <tr> 
        <td>{{playerinfo.name}}</td> 
        <td>{{playerinfo.country}}</td> 
        <td>{{playerinfo.totalpoints}}</td> 
       </tr> 
      </table> 
     </div> 
    </div> 

ng-repeatにヘッダーを挿入すると、複数回表示されます。これを解決する方法はありますか？

Answer 1

我々はより多くのアクセス権を持っている我々のモデルにオブジェクトを変更します。

var app = angular.module("app", []); 
 

 
app.controller("ctrl", function($scope) { 
 
    var allPlayers = { 
 
    jack: { 
 
     player1: { 
 
     name: "abd", 
 
     country: "SA", 
 
     totalpoints: 100 
 
     }, 
 

 
     player2: { 
 
     name: "tahir", 
 
     country: "SA", 
 
     totalpoints: 100 
 
     } 
 
    }, 
 
    john: { 
 
     player1: { 
 
     name: "duminy", 
 
     country: "SA", 
 
     totalpoints: 100 
 
     }, 
 

 
     player2: { 
 
     name: "morris", 
 
     country: "SA", 
 
     totalpoints: 100 
 
     } 
 
    }, 
 
    } 
 

 
    var modelHandler = function(model, object) { 
 
    for (var key in object) { 
 
     var x = { 
 
     name: key, 
 
     players: [] 
 
     } 
 
     //console.log(key); 
 
     for (var key2 in object[key]) { 
 
     var y = { 
 
      name: key2, 
 
      records: object[key][key2] 
 
     } 
 

 
     x.players.push(y); 
 
     } 
 
     model.push(x); 
 
    } 
 
    } 
 

 
    //new Model 
 
    $scope.persons = []; 
 

 
    modelHandler($scope.persons, allPlayers); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <table class="table table-bordered" ng-repeat="person in persons"> 
 
    <caption class="text-center"> 
 
     <h2>{{person.name}}</h2> 
 
    </caption> 
 
    <thead> 
 
     <tr> 
 
     <th></th> 
 
     <th>name</th> 
 
     <th>country</th> 
 
     <th>points</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="player in person.players"> 
 
     <td>{{player.name}}</td> 
 
     <td> 
 
      {{player.records.name}} 
 
     </td> 
 
     <td> 
 
      {{player.records.country}} 
 
     </td> 
 
     <td> 
 
      {{player.records.totalpoints}} 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

このようなものが欲しいですか？このサンプルで

var MyApp = angular.module("MyApp",[]); 
 
MyApp.controller("MyCtrl",['$scope',MyCtrl]); 
 
function MyCtrl($scope) { 
 
$scope.allPlayers = { 
 
     jack: { 
 
      player1: { 
 
       name: "abd", 
 
       country: "SA", 
 
       totalpoints: 100 
 
      },player2: { 
 
       name: "tahir", 
 
       country: "SA", 
 
       totalpoints: 100 
 
      } 
 
     }, 
 
     john: { 
 
      player1: { 
 
       name: "duminy", 
 
       country: "SA", 
 
       totalpoints: 100 
 
      },player2: { 
 
       name: "morris", 
 
       country: "SA", 
 
       totalpoints: 100 
 
      } 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div ng-app="MyApp" ng-controller="MyCtrl"> 
 
<div > 
 
     <div > 
 
      <table> 
 
      <thead> 
 
      <tr> 
 
      <th>Name</th> 
 
      <th>Country</th> 
 
      <th>Points</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody ng-repeat="(person,players) in allPlayers"> 
 
       <tr ng-repeat="(playername,playerinfo) in players"> 
 
        <td>{{playerinfo.name}}</td> 
 
        <td>{{playerinfo.country}}</td> 
 
        <td>{{playerinfo.totalpoints}}</td> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
     </div> 
 
    </div> 
 
    </div>