javascript - Nested unique ng-model per ng-repeat -

currently creating page has nested ng-repeats , ng-models. ng-models based off $index.

http://codepen.io/natdm/pen/vozapj?editors=101 (since jsfiddle had out-dated 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 $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 $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> 

i'm pulling number of teams , players per team factory. equate 2 numbers. maybe 5 teams 4 players each. make page 5 repeating tables, having rows 4 players , team name, each.

i'm trying think of way send these database. since page rendered off amount of teams , players, way make ng-models off of $index.

the database has following columns (subject change if needed):

• team_id (unique, created upon insert)
• league_id (unique per team, gets carried on factory)
• team_name
• player_1
• player_2
• player_3 (accepts null)
• player_4 (accepts null)
• player_5 (accepts null)
• player_6 (accepts null)
• standing
• paid
• createdat
• updatedat

how can have 1 page repeating team fields upload multiple teams @ once 1 $http.put request?

further more, maybe smaller issue, way have set, it's forcing input of each text ng-model name. that'd have change.

i think need parse structure in new 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);   } } 

then inside html need change repeat new structure

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

with

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

and

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

the http request

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

working pen http://codepen.io/anon/pen/xgaarp?editors=101