Javascript AngularJS表单和空/空值_Javascript_Html_Angularjs_Angularjs Scope

Javascript AngularJS表单和空/空值

javascript html angularjs

Javascript AngularJS表单和空/空值,javascript,html,angularjs,angularjs-scope,Javascript,Html,Angularjs,Angularjs Scope,我正在使用一个有点动态的AngularJS表单。换句话说，我能够添加输入字段行等。因此，我的方法是从$scope.formData空对象开始，封装绑定到静态和动态HTML表单元素的所有属性 AngularJS代码如下所示： (function() { var formApp = angular.module("formApp", []); formApp.controller("FormCtrl", function ($scope, $timeout) { $s

我正在使用一个有点动态的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>



主题名称：

订户：
添加订户
名称
电子邮件


调试信息：{{formData}}

注意末尾的Debug info部分，它显示

$scope.formData

对象及其内容。我在执行此表单的方式上有几个问题

首次加载页面时，
```
$scope
```
中没有
```
formData.title
```
属性，但由于它绑定到title输入文本字段，当我开始键入值时，
```
title
```
属性会添加到
```
$scope
```
中。但是，当我删除输入文本字段中的值时，
```
formData.title
```
属性仍然作为空字符串存在于
```
$scope
```
中。我想这没问题，但我真的想在提交表单时清除空值或空值。如果很容易做到的话，我想在客户端完成，这样服务器端代码就不需要清理任何东西
使用DynamicSubscribers部分，我可以继续添加任意多的行，但最终，我希望过滤掉客户端上的所有空订阅者对象

AngularJS在进一步处理之前（例如

$http

POST），是否有任何选项用于检测和清除

$scope

中的空值

注意我已经为这个例子设置了一个监视程序。

在formData上添加了监视程序

$scope.$watch('formData',function(n,o){
      if(typeof $scope.formData.title !== 'undefined' && $scope.formData.title === "" ){
        delete $scope.formData.title;
      }
},true);

更新小提琴：

对于所有应该使用角度形式验证的动态字段，您应该看到以下内容：

出于性能原因，我尝试避免使用观察程序。话虽如此，这确实不是一个有角度的问题，而是一个JavaScript问题。由于您完全可以控制数据何时传递给服务，因此我只需首先清理它。这相当简单，因为您的数据结构很浅

只需使用$parsers并覆盖默认的HTML输入元素

使用此实现，您可以随时控制模型值。因此，在您的示例中，只要视图值为空字符串，就可以将模型设置为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);

这是更新后的JSFIDLE:

这非常整洁。唯一的缺点是在

model:{year:null，price:null}

的情况下，最终结果将包括

model:{}

的空对象，而不是从

foo

中完全删除

model

。但对于其他场景，我会记住这种方法。谢谢。这个有趣的指令似乎将具有空值的属性转换为null，而不是删除/过滤掉null和空值。您完全正确，在AngularJS上下文中，这是一个JavaScript问题。数据结构被简化以关注手头的问题，但它是肤浅的。在理想情况下，我希望删除所有为null或空的非对象属性，以及所有自身属性为空或空的对象属性。我感觉需要一些递归来满足要求。总的来说，对于任何分层数据结构，递归都是首选。考虑到我实际形式中静态和动态字段的数量，我担心这个

$watch

函数实现会有多大。而性能可能是一个问题。我回答了另一个问题（来自@Swordfish0321），这是一个JS问题，而不是AngularJS问题。如果我可以遍历

$scope

对象并删除所有为空或null的非对象属性，以及所有自身属性均为空或null的对象属性，这将满足我的要求。

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);

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);