我正在使用一个比较动态的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
对象及其内容。我对表单的实现方式有几个问题。
- 当页面首次加载时,
$scope
中没有formData.title
属性,但由于它绑定到标题输入文本字段,当我开始输入值时,title
属性将被添加到$scope
。但是,当我删除输入文本字段中的值时,formData.title
属性仍然存在于$scope
中,作为空字符串。我认为这可以接受,但我真的想在提交表单时清理空或null值。如果方便的话,我希望在客户端上处理它,这样服务器端代码就不必清理任何内容。 - 通过动态的订阅者部分,我可以添加任意多行,但最终,我希望在客户端上过滤掉所有空的subscriber对象。
AngularJS是否有检测和清理$scope
中的null/空值的选项,以便进一步处理,例如$http
POST?
注意:我已经为这个例子设置了一个jsFiddle。