У меня есть форма со всеми входами, которые упущены как модели, такие как "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 будет передано серверу как объект JSON через HTTP
Вы можете использовать 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
}
}
Вы можете применить это и к любому полю.
Попробуй это. Я применил часы на переменную scope, которая будет уведомляться при изменении значения области. поместите условие внутри него и удалите ключ в соответствии со значением
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>
Существует два способа добиться этого:
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>
Я считаю, что самый чистый способ - использовать функцию 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 || "";
}
}
});
См. Обновление plnkr по адресу http://plnkr.co/edit/Dv86j1Clr6apWyWjZBPk?p=preview
попробуйте 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);
}
}
});
if(input.name == "") delete input["name"];