数组中的所有值都绑定到相同的值

时间:2014-04-14 10:22:06

标签: angularjs angularjs-scope angularjs-ng-repeat

我试图更新$ scope.match.teams [0]中的值,并为玩家提供更多信息'名字,但是当我输入一个字段时,它就会被每个玩家所束缚。该团队的名称。

控制器:

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

团队的选择工作正常,只是在这里分配问题的名称。

{{ match.teams[battingFirst.id] }}的输出表明,每次填写其中一个输入时,我都会创建一个新的团队,并附加{ player: {"name":"sdf"} }个对象。

1 个答案:

答案 0 :(得分:1)

你只需要尝试:

ng-model="player.name"

您的battingFirst已经是上述选择中的一个选定团队。当您绑定到此players中的battingFirst时,您可以正确绑定到所选团队的players

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

您遇到的问题是因为ng-repeat 会创建子范围。因此,ng-repeat 中的match.teams与父作用域的match.teams不一样