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

Question

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

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

控制器：

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 名球员。这将创建一个包含 5 个重复表的页面，每行包含 4 名球员和一个球队名称。

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

数据库有以下列（如有需要可更改）：

• team_id（唯一，插入时创建）
• league_id（每个团队唯一，这是从工厂继承的）
• 团队名称
• player_1
• player_2
• player_3（接受空值）
• player_4（接受空值）
• player_5（接受空值）
• player_6（接受空值）
• 站着
• 付费
• 创建于
• 更新时间

如何让一个包含重复团队字段的页面通过一个 $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

Answer 2

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

myApp.controller('teamController', function($scope) {
    $scope.team={};
    $scope.league = { teams: 5,
                     format: 4}

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

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

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="teamController">
    <h1>Create Teams</h1>

    <table  ng-repeat="p 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_'+($index+1)].team_name"/></td>
        </tr>
        <tr ng-repeat="p in toArray(league.format) track by $index" ng-init="innerIndex=$index">
            <td>Player  {{$index + 1}}</td>
            <td><input type="text" ng-model="team['team_'+($parent.$index+1)].player['player_'+(innerIndex + 1)]"/></td>

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

    <button ng-click="log(team)">Test</button>
  <div>
  JSON: <br>{{team}}
  </div>

</div>