Remove key-value if input is null in angularJS
Question
I have a form with all inputs decleared as models like "ng-model = 'input.text' ". Everything works fine but what I need is whenever the value is now null the key-value pair should be gone as well like {} not { 'text':"" }. This can be achieved if the model is required but I was wondering if this is achievable without using required.
The code is:
<!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>
The plunker is: http://plnkr.co/edit/u483ay8OZCIo9E32ssVU?p=preview
PS
The JSON value of input will be passed to the server as a JSON object through HTTP
5 answers
solution1
2 2016-05-26 07:07:12
Try this. I have applied watch on scope variable which will get notify whenever scope value change. put condition inside it and delete key according to value
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>
solution2
1 2016-05-26 07:03:25
try ng-changed, remove Object Prop Key , when scope value is null or blank
<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);
}
}
});
solution3
1 2016-05-26 07:17:09
There are two ways to achieve this:
1. Use ng-change in the input tag, which will check if text is empty, delete it.
In your controller, add this function:
$scope.checkText = function() {
if (!$scope.input.text)
delete $scope.input.text;
};
And update your input tag as:
<input type="text" ng-model="input.text" ng-change="checkText()" />
2. Just modify your display style. Display the text only when it is available.
<p ng-show="input.text">text = {{ input.text }}</p>
<br/>
<p ng-show="input.number">number = {{ input.number }}</p>
solution4
1 ACCPTED 2016-05-26 07:23:54
You may use ngChange to check if your input is null whenever you make a change to your input. In your html, something like:
<input type="text" ng-model="input.text" ng-change="validate()" />
And in your AngularJS controller:
function validate() {
if ($scope.input.text === null) {
delete $scope.input[text]; // First option
delete $scope.input.text; // Second option
}
}
You can apply this to any field, too.
solution5
1 2016-05-26 07:32:29
I think the cleanest way is to use a getter/setter function for your text value and to delete the property in the setter if the value is empty:
<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 || "";
}
}
});
See update plnkr at http://plnkr.co/edit/Dv86j1Clr6apWyWjZBPk?p=preview
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.