2015-08-21 13 views
7

O ile mogę stwierdzić, AngularJS nie szereguje pola formularza, jeśli jest puste. Ale potrzebuję tych pól do wygenerowania JSON, nawet jeśli są puste. Próbuję zapytać o to JSON, a zakończy się niepowodzeniem, jeśli nie ma tam deskryptorów pól. Wszelkie wskazówki, jak uzyskać AngularJS, aby to zrobić?Jak wymusić na AngularJS serializację pustych pól formularzy?

W poniższym przykładzie, jeśli wpisałeś "Jan" w polu nazwy i nic w polu optionalval, to json, który jest utworzony, to {imię: John}. Ale chciałbym, żeby to było takie {imię: 'John', optionalval: ''}. Jest tak w przypadku formularza "utwórz nowy", w którym pola opcjonalne mogą nie mieć żadnych wartości. Ale pola muszą być wysłane, czy mają wartości, czy nie.

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

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

+1

nie powinno być problemem, jeśli używasz 'NG-model' prawidłowo . Podaj kod. Nie możemy rozwiązać problemu, którego nie możemy zobaczyć: – charlietfl

+0

Spróbuj w ten sposób: var dataJSON = {field1: '1', field2: ''}, $ http {data: JSON.stringify (dataJSON) –

+0

Dołącz model do swoich danych wejściowych i powinieneś być w porządku. Pokaż kod, proszę. – ajmajmajma

Odpowiedz

6

Jednym ze sposobów jest preinitialize modelu z pustym ciągiem. Na przykład, poprzez ustawienie wartości w modelu regulatora:

$scope.item = {optionalval: ''}; 

Oto demo:

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope, $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>

+0

Powinieneś używać inicjowania ze sterowników zamiast używania 'ng-init'. To nie jest prawidłowe użycie, więcej informacji można znaleźć w dokumentacji. https://docs.angularjs.org/api/ng/directive/ngInit – cverb

+2

@cverb Cóż, jest to ** poprawne ** użycie dyrektywy, jednak masz rację, że użycie kontrolera może być w tym przypadku lepsze. Edytowane. – dfsq

+0

dfsq i @cverb, dziękuję za odpowiedzi. Jako odpowiedź zaznaczyłem odpowiedź dfsq, ale miałem nadzieję na inną. Mój kod w świecie rzeczywistym zajmuje się produktem, który ma około 50 pól i miałem nadzieję, że nie będę musiał inicjować wszystkich tych pól i po prostu mam ogólny kontroler "elementu", który poradzi sobie z serializacją dowolnej formy, która chce używaj go jako kontrolera. Wygląda na to, że muszę napisać coś dla każdego rodzaju przedmiotu. Dzięki jeszcze raz! – rogdawg

Powiązane problemy