All values in array bound to same value

Question

I'm trying to update values inside $scope.match.teams[0] with vaules for the players' names, but when I input in a single field, it is bound to every players' name for that 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 for 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 the team works fine, it's just assigning the names that's the problem here.

The output of {{ match.teams[battingFirst.id] }} shows that I'm creating a new team every time I fill in one of the inputs, with a { player: {"name":"sdf"} } object attached to it.

Khanh TO · Accepted Answer · 2014-04-14 10:25:57Z

1

You just need to try:

ng-model="player.name"

Your battingFirst is already a selected team from the above select. When you bind to players in this battingFirst, you bind correctly to players of the selected team.

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

The problem you have is because ng-repeat creates child scopes. Therefore match.teams inside your ng-repeat is not the same as the match.teams of your parent scope.

answered Apr 14, 2014 at 10:25

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

babbaggeii Over a year ago

Ah, of course. That works now. I'll accept this answer in 9 minutes when it allows me to.

Khanh TO Over a year ago

@babbaggeii: added more explanation about your problem.

Collectives™ on Stack Overflow

All values in array bound to same value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related