json – 如何强制AngularJS序列化空表单字段

前端之家收集整理的这篇文章主要介绍了json – 如何强制AngularJS序列化空表单字段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
据我所知,如果表单字段为空,AngularJS不会序列化表单字段.但是,我需要将这些字段放在生成JSON中,即使它们是空的.我试图查询该JSON,如果字段描述符不在那里它将失败.有关如何让AngularJS执行此操作的任何提示

在下面的示例中,如果您在名称字段中输入“John”,而在optionalval字段中没有输入任何内容,则形成的json是{name:John}.但我希望它像这样{name:’John’,optionalval:”}.这是“创建新”表单的情况,其中可选字段可能没有任何值.但是,无论是否有值,都需要发送字段.

<!doctype html>
<html>
    <head>
        <title>Serialize Test</title>
        <script src="js/angular.min.js"></script>
        <script>
			var app = angular.module('myApp',[]);
			app.controller('myCtrl',function($scope,$http) {
				$scope.addnew = function(){
					$http.put('/newthing.json',JSON.stringify($scope.item))
						.success(function(){
						})
						.error(function(){
						});
				};
			});
        </script>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
		<label for="name">Name:</label>
		<input type="text" id="name" ng-model="item.name" required>
		<label for="optionalval">Don't put anything here:</label>
		<input type="text" id="optoinalval" ng-model="item.optionalval">

		<button ng-click="addnew()">Serialize</button>
    </body>
</html>

解决方法

一种方法是使用空字符串预初始化模型.例如,通过在控制器中设置模型值:
$scope.item = {optionalval: ''};

这是一个演示:

var app = angular.module('myApp',[]);
app.controller('myCtrl',$http) {
  $scope.item = {optionalval: ''};
  $scope.addnew = function() {
    $http.put('/newthing.json',JSON.stringify($scope.item))
    .success(function() {})
    .error(function() {});
  };
});
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <label for="name">Name:</label>
  <input type="text" id="name" ng-model="item.name" required>
  
  <label for="optionalval">Don't put anything here:</label>
  <input type="text" id="optionalval" ng-model="item.optionalval">

  <button ng-click="addnew()">Serialize</button>
  <pre>{{item | json}}
</div>

猜你在找的JavaScript相关文章