我正在使用一个有点动态的AngularJS表单。换句话说，我能够添加输入字段的行等。因此，我的方法是从一个 $scope.formData 空对象，来封装所有绑定到静态和动态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 对象及其内容。我在实现这个表单的方式上有几个问题。
formData.title 中的财产 $scope但由于它被绑定在标题输入文本字段上，当我开始输入一个值时，这个 title 属性被添加到 $scope. 然而，当我删除输入文本字段中的值时，我的 formData.title 财产仍然存在于 $scope 作为一个空字符串。我想这是可以的，但我真的想在提交表单时清理空值或空值。如果可以的话，我想在客户端进行清理，这样服务器端的代码就不需要清理任何东西了。AngularJS是否有任何选项来检测和清理对象中的nullempty值。$scope 在进一步处理之前，如 $http POST?
注 我已经建立了一个 jsFiddle 为这个例子。
只要使用 ngModelController $parsers并覆盖默认的HTML输入元素。
通过这种实现，你可以一直控制模型的值。所以在你的情况下，你可以设置模型为空，每当视图值是空字符串时。
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.net9sjra07q
出于性能的考虑，我尽量避免使用watchers。说到这里，这真的不是一个Angular的问题，而是一个JavaScript的问题。由于你可以完全控制数据何时传递给服务，所以我会先简单地清理它。由于你的数据结构很浅显，这一点相当简单。
(function() {
var formApp = angular.module("formApp", []);
formApp.controller("FormCtrl", function ($scope, $timeout) {
// Remove junkiness
var _remove = function remove(item) {
if ($scope.formData.title === undefined || $scope.formData.title === '') {
delete $scope.formData.title;
}
};
$scope.formData = {};
$scope.formData.subscribers = [
{ name: null, email: null }
];
$scope.addSubscriber = function() {
$scope.formData.subscribers.push({ name: null, email: null });
};
// Submit to test functionality
$scope.submit = function() {
// Remove title if empty
_remove($scope.formData.title);
/* Remove name and email if empty.
* If your list of fields starts to get large you could always
* just nest another iterator to clean things up.
*/
angular.forEach($scope.formData.subscribers, function(sub) {
_remove(sub.name);
_remove(sub.email);
});
};
});
})();
function replacer(key, value) {
if (value == "" || value == null) {
return undefined;
}
return value;
}
var foo = {foundation: "", model: {year: 2015, price:null}, week: 45, transport: "car", month: 7};
foo = JSON.stringify(foo, replacer);
foo =JSON.parse(foo);
console.log(foo);
在formData上添加了Watcher。
$scope.$watch('formData',function(n,o){
if(typeof $scope.formData.title !== 'undefined' && $scope.formData.title === "" ){
delete $scope.formData.title;
}
},true);
更新的提琴。https：/jsfiddle.net1ua6oj5e6
对于所有的动态字段，你应该使用angular表单验证，你应该看到这个。https:/docs.angularjs.orgguideforms