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

我正在考虑将这些发送到数据库的方法。由于此页面是由团队和玩家的数量组成的，因此制作ng模型的唯一方法是使用$ index。

数据库包含以下列（如果需要，可能会更改）：

team_id（唯一，插入时创建）
league_id（每个团队都是独一无二的，这是从工厂转移的）
team_name
player_1
player_2
player_3（接受null）
player_4（接受null）
player_5（接受null）
player_6（接受null）
站立
付款
createdAt
updatedAt

如何通过一个$ 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

＆＃13;

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

＆＃13;

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

＆＃13;

每ng重复嵌套的独特ng模型

2 个答案: