在表中呈现嵌套对象

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

我想构建一个表格，其标题为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 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>

Answer 2

  

在此示例中，我们将对象更改为模型以获得更多访问权限。

＆＃13;

＆＃13;

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

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;