javascript - Angular 形式复选框最初未包含在模型中

Question

我正在构建一个动态表单，其中可以包含任意数量的字段组合和字段类型。一个典型的例子可能是使用名字、姓氏、电子邮件和密码进行用户注册。然而，某些表单中还包含一个用于事件字段的 bool 复选框。

我的 Controller 中有一个空对象，该对象将由表单填充，然后提交。我像往常一样将 ng-model 附加到所有表单元素，这些都运行良好，直到我到达 bool 字段，除非用户与其交互，否则该字段不会包含在模型中。

服务器端通常需要 bool 字段，因此我希望默认情况下选中它，但这不会添加到模型中，除非您首先取消选中它并再次选中它。

$scope.formData = {}

<div class="{{field.name}}">
    <label for={{field.name}} class="field-label">{{field.prettyName}}</label>
    <input 
        type="checkbox" 
        class="form-field boolean-checkbox" 
        id={{field.name}} 
        ng-model="formData[field.name]"
        ng-checked="true"
    /> 
</div>

所以场景是:

初始页面加载复选框已选中，但对象读取为:

{}

用户必须取消选中该复选框，然后重新选中它，该对象将显示为:

{
    "active":true
}

我也尝试过使用 ng-init="true" 但没有什么乐趣。

Answer 1

我不知道为什么ngInit不适合你，但这里有一个使用它的例子，如 luk492在其评论中指出(您需要检查控制台日志才能看到它的工作):

angular
  .module('myApp', [])
  .controller('MainCtrl', ['$scope',
    function($scope) {
      $scope.formData = {};

      $scope.$watch(function() {
        console.log('formData', JSON.stringify($scope.formData, null, 4))
      });
    }
  ]);

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <input type="checkbox" ng-init="formData.truthyValue = true" ng-model="formData.truthyValue">
    <input type="checkbox" ng-init="formData.falsyValue = false" ng-model="formData.falsyValue">
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>

您将看到 truthyValue 和 falsyValue 都被添加到 formData 中，无论它们的 bool 值如何。

需要注意的重要事项 ngChecked文档指出你不应该将它与 ngModel 一起使用，因为这可能会导致意外的行为。