Question

我一直在做很多谷歌搜索，但我无法弄清楚为什么这不会起作用。我有一个＆＃34; PlayerController＆＃34;以及添加新玩家的表单。输入绑定到$ scope.NewPlayer.name和$ scope.NewPlayer.color，并在更改时更新范围变量。当您点击＆＃34;添加新播放器＆＃34;表单应重置范围变量，以便输入为空。

$scope.startNew = function()
{
    $scope.NewPlayer.name = "";
    $scope.NewPlayer.color = "";

    $("#new_player_modal").modal("show");
}

但这并没有更新。试过$ scope。$ apply（）和$ scope。$ digest（）并且说

Error: [$rootScope:inprog] $apply already in progress

这是HTML

    <!-- Player Modal -->
    <div class="modal fade" id="new_player_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="PlayerController">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Create a New Player</h4>
          </div>
          <form id="new_player_form" ng-submit="startNewSubmit()">
          <div class="modal-body">

              <div class="form-group">
                <label for="exampleInputEmail1">Name</label>
                <input type="text" ng-model="NewPlayer.name" class="form-control" id="exampleInputEmail1" placeholder="Leave Blank To Enter Later">
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Color</label>
                <input type="text" ng-model="NewPlayer.color" class="form-control color-input" id="exampleInputPassword1" placeholder="HEX Color">
              </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
        </form>
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

我做错了什么？

编辑：清理混乱 -

$scope.startNewSubmit = function()
{
    var cont = true;
    if($scope.newPlayerColor)
    {
        Player = $scope.getPlayerByColor($scope.newPlayerColor);
        if(Player != null)
        {
            alert("Player Color Already Selected!");
            cont = false;
        }
    }
    else
    {
        alert("Please choose a color.");
        cont = false;
    }

    if($scope.newPlayerName)
    {
        Player = $scope.getPlayerByName($scope.newPlayerName);
        if(Player != null)
        {
            alert("Player Name Already In Use!");
            cont = false;
        }
    }

    if(cont)
    {
        var Player = {"name":$scope.newPlayerName,"color":$scope.newPlayerColor};
        $scope.players.push(Player);

        $("#new_player_modal").modal("hide");
    }
}

startNew和startNewSubmit是不同的。

Answer 1

http://jsfiddle.net/23t4b/1/

要回答您的问题：您正在将模型用作NewPlayer.name和NewPlayer.color，而您将它们（在控制器中）称为newPlayerName和newPlayerColor

注意：将来，如果你为其他人准备一个（正常运作的）jsfiddle来快速有效地集中精力回答你的问题，那将会有所帮助。例如，使用您发布的脚本，我必须模拟$scope.getPlayerByColor和$scope.getPlayerByName。此外，您可能希望将这两者重构为服务，并记住启动$scope.players = []

AngularJS数据绑定 - 不从模型更新的输入

1 个答案: