AngularJS复选框模型值未定义。

Question

我有一个问题，在试图将我的模型中的复选框值发布到服务器时，由于表单上尚未与复选框交互，因此angular似乎没有为其分配值。当我要求复选框的值时，它返回为未定义。

这是我的标记：

<div class="form-group">
    <input id="templateDisable" type="checkbox" ng-model="template.disabled" />
    <label for="templateDisable">Disabled</label>
</div>

这是我控制器上保存操作的简化版本:

$scope.save = function (form) {
    if (form.$valid) {
        var formData = new FormData();
        // this is the problem line of code
        formData.append("disabled", $scope.template.disabled);
        // ... some other stuff
    }
};

实际上，在我点击保存操作之前先勾选然后取消勾选复选框，会导致模板.disabled属性为false，这是我在没有任何手动干预的情况下所期望的。

我看到了其他相关的问题，例如AngularJS: Initial checkbox value not in model，但是像简单的复选框这样的东西肯定应该内置吧？我不应该编写指令来管理复选框，对吧？

- A. Murray

Answer 1

这是按设计要求的。如果您希望在模型上设置默认值，那么您应该在控制器内初始化它（推荐），或者使用ng-init。

app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.template = {
          disabled = false
        };
      }
    ]
  );

<div class="form-group">
  <input type="checkbox" ng-model="template.disabled" ng-init="template.disabled=false" />
  <label>Disabled</label>
</div>

- Stewie

---

留下模型属性未定义的好处是什么？ - A. Murray

我想说有几个问题。a) 仅通过将模型附加到控件而不显式更改模型是不好的设计，以我的看法。 b) 保持一致性，因为如果复选框默认设置模型为false，则我猜文本输入也必须将初始值设置为空字符串''，以保持一致性。但这也是不好的设计。 - Stewie

就像@NeilAtkinson在下面指出的那样，即使一开始是true，这也总是会将值设置为false。 - Robin-Hoodie

Answer 2

以下代码会在页面加载（或刷新）时始终将状态设置回“未选中”。换句话说，每当页面被刷新时，它都会覆盖用户的实际选择。

<input type="checkbox" ng-model="template.disabled" 
 ng-init="template.disabled=false" />

如果您希望复选框的状态在初始时设置为默认状态，并且还希望它记住用户的交互，那么以下是您想要的。

<input type="checkbox" ng-model="template.disabled" 
 ng-init="template.disabled = template.disabled || false" />

- Neil Atkinson