javascript - 每个 ng-repeat 嵌套唯一的 ng-model

Question

当前正在创建一个包含嵌套 ng-repeats 和 ng-models 的页面。 ng-models 基于 $index。

http://codepen.io/natdm/pen/vOzaPj?editors=101 (因为 jsfiddle 有一个过时的 Angular)

Controller :

var myApp = angular.module('myApp', []);

myApp.controller('teamController', function($scope) {

    $scope.league = { teams: 5,
                     format: 4}

    $scope.toArray = function(team) {
        return new Array(team);
    };

    $scope.log = function(data) {
        console.log(data);
    };

});

HTML:

<div class="container" ng-app="myApp" ng-controller="teamController">
    <h1>Create Teams</h1>

    <table ng-repeat="t in toArray(league.teams) track by $index">
        <thead class="col-md-6">
        <tr>
            <th>Team {{$index + 1}}</th>
        </tr>
        </thead>
        <tbody class="col-md-6">
        <tr>
            <td>Team Name</td>
            <td><input type="text" ng-model="team.team_name"/></td>
        </tr>
        <tr ng-repeat="p in toArray(league.format) track by $index">
            <td>Player {{$index + 1}}</td>
            <td><input type="text" ng-model="team.player_+[$index + 1]"/></td>

        </tr>
        </tbody>
    </table>

    <button ng-click="log(team)">Test</button>

</div>

我正在从工厂中提取团队数量和每个团队的玩家数量。它们只相当于两个数字。可能有 5 支球队，每支球队有 4 名球员。这将创建一个包含五个重复表的页面，每行包含 4 个玩家和一个团队名称。

我正在想办法将这些发送到数据库。由于此页面是根据球队和球员的数量呈现的，因此制作 ng-models 的唯一方法是使用 $index。

数据库包含以下列(如有需要，可能会发生变化):

• team_id(唯一，插入时创建)
• league_id(每个团队唯一，这是从工厂继承过来的)
• 团队名称
• 玩家_1
• 玩家_2
• player_3(接受 null)
• player_4(接受 null)
• player_5(接受 null)
• player_6(接受 null)
• 站着
• 付费
• 创建时间
• 更新时间

如何让包含重复团队字段的页面通过一个 $http.put 请求同时上传多个团队？

此外，也许是一个较小的问题，按照我设置的方式，它会强制每个文本的输入成为 ng-model 名称。那必须改变。

Answer 1

我认为你需要在一个新的结构中解析你的结构

$scope.parseLeague = [];

for(var i=0;i<$scope.league.teams ;i++){
  $scope.parseLeague.push({team: "team_"+i, players: []});
  for(var j=0;j<$scope.league.format;j++){
    $scope.parseLeague[i].players.push("player_"+j);
  }
}

然后在 html 中，您需要使用新结构更改重复

<table ng-repeat="team in parseLeague track by $index">

与

<tr>
    <td>Team Name</td>
    <td><input type="text" ng-model="team.name"/></td>
</tr>

和

<tr ng-repeat="player in team.players track by $index">
    <td>Player {{$index + 1}}</td>
    <td><input type="text" ng-model="player"/></td>
</tr>

http请求

var request = $http({
    method: "post",
    url: "yoururl",
    data: { teamsdata: angular.toJson($scope.parseLeague)}
});
request.success(
    function( risp ) {
        //handle your risp
    }
);

工作笔http://codepen.io/anon/pen/xGaaRP?editors=101