我正在使用一个有点动态的 AngularJS 表单。换句话说，我可以添加输入字段的行等。所以我的方法是从一个$scope.formData 空对象开始，封装所有绑定(bind)到静态和动态 HTML 表单元素。
AngularJS 代码如下:
(function() {
var formApp = angular.module("formApp", []);
formApp.controller("FormCtrl", function ($scope, $timeout) {
$scope.formData = {};
$scope.formData.subscribers = [
{ name: null, email: null }
];
$scope.addSubscriber = function() {
$scope.formData.subscribers.push({ name: null, email: null });
};
});
})();
AngularJS 表单的 HTML:
<body data-ng-app="formApp">
<div data-ng-controller="FormCtrl">
<p>
Name of Topic: <input type="text" data-ng-model="formData.title" placeholder="enter a title" />
</p>
Subscribers:
<button data-ng-click="addSubscriber()">Add subscriber</button>
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr data-ng-repeat="subscriber in formData.subscribers">
<td><input type="text" data-ng-model="subscriber.name" placeholder="enter name" /></td>
<td><input type="text" data-ng-model="subscriber.email" placeholder="enter email" /></td>
</tr>
</table>
<hr style="margin:1em 0;" />
<p>
<em>Debug info</em>: {{ formData }}
</p>
</div>
</body>
请注意末尾的调试信息部分，它显示了$scope.formData 对象及其内容。我在实现此表单的方式上遇到了一些问题。
- 当页面首次加载时，
$scope中没有formData.title属性，但由于它绑定(bind)到 Title 输入文本字段，当我开始输入一个值，title属性会添加到$scope中。但是，当我删除输入文本字段中的值时，formData.title属性仍作为空字符串存在于$scope中。我想这没问题，但我真的想在提交表单时清理空值或空值。如果容易的话，我想在客户端执行此操作，这样服务器端代码就不必清理任何东西。 - 通过动态 Subscribers 部分，我可以继续添加任意数量的行，但最终，我想过滤掉客户端上所有空的 subscriber 对象边。
AngularJS 是否有任何选项可以在进一步处理之前检测和清除 $scope 中的 null/空值，例如 $http POST？
注意 我设置了一个 jsFiddle对于这个例子。
最佳答案
只需使用 ngModelController $parsers 并覆盖默认的 HTML 输入元素。
通过此实现，您可以始终控制模型值。 因此，在您的情况下，只要 View 值为空字符串，您就可以将模型设置为 null。
var inputDefinition = function () {
return {
restrict: 'E',
require: '?ngModel',
link: function (scope, element, attr, ngModel) {
if (ngModel) {
var convertToModel = function (value) {
return value === '' ? null : value;
};
ngModel.$parsers.push(convertToModel);
}
}
};
/**
* Overwrite default input element.
*/
formApp.directive('input', inputDefinition);
这是更新后的 JSFiddle:https://jsfiddle.net/9sjra07q/
关于javascript - AngularJS 表单和 null/空值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29725499/