AngularJS复选框模型值未定义答案

【问题标题】：AngularJS checkbox model value is undefinedAngularJS复选框模型值未定义
【发布时间】：2014-01-11 15:24:21
【问题描述】：

我有一个问题，我试图将我的模型中的复选框的值发布到服务器，并且由于表单上的复选框没有被交互，所以当我询问复选框的值，它返回为未定义。

这是我的标记：

<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
    }
};

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

我看过其他相关的问题，例如AngularJS: Initial checkbox value not in model 但肯定应该加入一个简单的复选框之类的东西吗？我不应该写指令来管理复选框吗？

【问题讨论】：

标签： javascript angularjs checkbox

【解决方案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>

【讨论】：

不定义模型属性有什么好处？
我想说有几个。 a) 模型不会被隐式更改，只需将其附加到控件即可。那将是糟糕的设计，恕我直言。 b）保持一致性，因为如果复选框默认将模型设置为false，那么我猜文本输入也必须将初始值设置为空字符串''，以保持一致。但这也是糟糕的设计。
就像@NeilAtkinson 在下面指出的那样，这将始终将值设置为 false，即使一开始是 true。

【解决方案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" />

【讨论】：