如果 angularJS 中的输入为空，则删除键值答案

【问题标题】：Remove key-value if input is null in angularJS如果 angularJS 中的输入为空，则删除键值
【发布时间】：2016-05-26 06:54:05
【问题描述】：

我有一个表单，其中所有输入都被清除为“ng-model = 'input.text'”之类的模型。一切正常，但我需要的是，只要值现在为 null，键值对就应该像 {} 而不是 {'text':"" } 一样消失。如果需要模型，这可以实现，但我想知道不使用 required 是否可以实现。

代码是：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  </head>

  <body ng-controller="myCtrl">
    <input type="text" ng-model="input.text">
    <input type="number" ng-model="input.number">
    <p>{{ input }}</p>
    <script type="text/javascript">
      app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $timeout){
        $scope.input = {};
      });
    </script>
  </body>
</html>

笨蛋是：http://plnkr.co/edit/u483ay8OZCIo9E32ssVU?p=preview

附言

输入的JSON值会通过HTTP作为JSON对象传递给服务器

【问题讨论】：

试试这个if(input.name == "") delete input["name"];
条件句放在哪里？

标签： javascript angularjs

【解决方案1】：

试试这个。我已经对范围变量应用了监视，每当范围值发生变化时都会收到通知。将条件放入其中并根据值删除键

app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.input = {};
  $scope.$watch("input.text", function() {
    if ($scope.input.text == "") {
      delete $scope.input["text"];
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="input.text">
  <input type="number" ng-model="input.number">
  <p>{{input}}</p>
</div>

【讨论】：

你只是通过 HTML 作弊。您甚至更改了范围变量，但感谢您尝试
强烈建议不要使用观察者而不是简单的指令（在这种情况下为ng-change）。阅读本文以了解原因。 codelord.net/2015/06/11/…
感谢您的建议。会照顾它。 @Lokesh

【解决方案2】：

每当您更改输入时，您都可以使用ngChange 检查您的输入是否为空。在您的 html 中，类似于：

<input type="text" ng-model="input.text" ng-change="validate()" />

在你的 AngularJS 控制器中：

function validate() {
   if ($scope.input.text === null) {
     delete $scope.input[text]; // First option
     delete $scope.input.text;  // Second option
   }
}

您也可以将其应用于任何领域。

【讨论】：

我认为这是最可重用的方法
很高兴能提供帮助:)

【解决方案3】：

有两种方法可以实现：

1.在输入标签中使用ng-change，会检查text是否为空，删除。

在你的控制器中，添加这个函数：

$scope.checkText = function() {
    if (!$scope.input.text)
        delete $scope.input.text;
};

并将您的输入标签更新为：

<input type="text" ng-model="input.text" ng-change="checkText()" />

2。只需修改您的显示样式。仅在可用时显示文本。

<p ng-show="input.text">text = {{ input.text }}</p>
<br/>
<p ng-show="input.number">number = {{ input.number }}</p>

【讨论】：

【解决方案4】：

尝试 ng-changed，删除 Object Prop Key ，当范围值为 null 或空白时

<input type="text" ng-model="input.text" ng-change="removeProp('input.text');">
    <input type="number" ng-model="input.number">
    <p>{{ input }}</p>
    <script type="text/javascript">
      app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $timeout){
        $scope.input = {};
        $scope.removeProp = function(e){
          if(!eval('$scope.'+e)){
            eval('delete $scope.'+e);
          }
        }
      });

【讨论】：

不，我想要的是而不是 {"text":""} 当模型“input.text”的值为 null 或空白时应该是 {}
修改了我的评论；

【解决方案5】：

我认为最简洁的方法是对文本值使用 getter/setter 函数，如果值为空，则删除 setter 中的属性：

<input type="text" ng-model="inputText" ng-model-options="{ getterSetter: true }">
<input type="number" ng-model="input.number">
<p>{{ input }}</p>
<script type="text/javascript">
  app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope, $timeout){
    $scope.input = {};

    $scope.inputText = function(value) {
      if(arguments.length) {
        if(!value) {
          delete $scope.input.text;
        }
        else {
          $scope.input.text = value
        }
      }
      else {
        return $scope.input.text || "";
      }
    }
  });

在http://plnkr.co/edit/Dv86j1Clr6apWyWjZBPk?p=preview查看更新 plnkr

【讨论】：