angularjs - All values in array bound to same value -


i'm trying update values inside $scope.match.teams[0] vaules players' names, when input in single field, bound every players' name team.

controller:

$scope.match = {         teams: [             {                 id: 0,                 name: "",                 players: [                     { id: 1, name: "" },                     { id: 2, name: "" },                     { id: 3, name: "" },                     { id: 4, name: "" },                     { id: 5, name: "" },                     { id: 6, name: "" },                     { id: 7, name: "" },                     { id: 8, name: "" },                     { id: 9, name: "" },                     { id: 10, name: "" },                     { id: 11, name: "" },                 ]             },             {                 id: 1,                 name: "",                 players: [                     { id: 1, name: "" },                     { id: 2, name: "" },                     { id: 3, name: "" },                     { id: 4, name: "" },                     { id: 5, name: "" },                     { id: 6, name: "" },                     { id: 7, name: "" },                     { id: 8, name: "" },                     { id: 9, name: "" },                     { id: 10, name: "" },                     { id: 11, name: "" },                 ]             }         ]     };  $scope.battingfirstselected = function(){      switch ($scope.battingfirst.id) {          case 0:             $scope.battingsecond = $scope.match.teams[1];          case 1:             $scope.battingsecond = $scope.match.teams[0];     } }; 

html:

      team batting first:       <select         ng-change="battingfirstselected()"         ng-model="battingfirst"         ng-options="team.name team in match.teams">       </select>        <div ng-repeat="player in battingfirst.players">         <input           class="form-control"           ng-model="match.teams[battingfirst.id].player.name"           value="" />       </div>        <div ng-repeat="player in match.teams[battingfirst.id].players">         {{ match.teams[battingfirst.id].player.name }}       </div> 

the selection of team works fine, it's assigning names that's problem here.

the output of {{ match.teams[battingfirst.id] }} shows i'm creating new team every time fill in 1 of inputs, { player: {"name":"sdf"} } object attached it.

you need try:

ng-model="player.name"

your battingfirst selected team above select. when bind players in battingfirst, bind correctly players of selected team.

<div ng-repeat="player in battingfirst.players">       <input           class="form-control"           ng-model="player.name"           value="" />   </div> 

the problem have because ng-repeat creates child scopes. therefore match.teams inside ng-repeat is not same match.teams of parent scope.


Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -