Question

我正在构建一个动态表单，其中可以包含任意数量的字段组合和字段类型。一个典型的例子可能是用户注册firstName，lastName，email和密码。但是，在某些表单中也包含一个布尔复选框，用于像active这样的字段。

我的控制器中有一个空对象，将由表单填充然后提交。我像往常一样将ng-model附加到所有表单元素，这些都运行良好，直到我到达模型中未包含的布尔字段，除非用户与之交互过。

服务器端通常需要布尔字段，因此我希望默认情况下检查它，但除非您先取消选中并再次检查，否则不会将其添加到模型中。

$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

如果您的表单在开头有命名选项ng-checked="true"，那么您可以在后端使用“常量”。因此，如果表单返回以下数据：

{ NULL }

然后你可以使用你的常量，因为表单是真的。如果用户更改了选项，则可以使用表单值

{
    "active":true
}

如果您有任何进一步的问题，请不要犹豫，评论我的答案。：）

Answer 2

我不确定为什么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，无论其布尔值如何。

ngChecked文档需要注意的一点是，不应与ngModel一起使用，因为这会导致意外行为。

Angular form复选框最初未包含在模型中

2 个答案: