Question

我有一个表单，所有输入都被删除为“ng-model ='input.text'”之类的模型。一切正常但我需要的是当值现在为null时，键值对应该消失，就像{} not {'text'：“”}一样。如果需要模型，可以实现这一点，但我想知道这是否可以在不使用所需的情况下实现。

代码是：

<!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

PS

输入的JSON值将通过HTTP

作为JSON对象传递给服务器

Answer 1

试试这个。我已经在范围变量上应用了watch，只要范围值发生变化就会收到通知。将条件置于其中并根据值

删除密钥

＆＃13;

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"];
    }
  });
});

＆＃13;

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

＆＃13;

Answer 2

尝试更改，当范围值为null或空白时，删除对象Prop Key

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

Answer 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>

Answer 4

每当您更改输入时，可以使用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
   }
}

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

Answer 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

如果angularJS中的输入为null，则删除键值

5 个答案: