2013-07-01 14 views
10

Ist es möglich, dass ng-Modelle Standardwerte erhalten, wie ''?AngularJS Standardwert für ng-Modell

Ich habe ein Formular, auf dem ich die serialize-Funktion von jQuery verwendet habe, und immer wenn ein a-Wert nicht vorhanden ist, wird es immer noch in den serialisierten Daten enthalten, z. .

Wenn ich jedoch versuche, es mit Angulars $http zu buchen und das Modell von $scope zu bekommen, erscheint es als , wenn es leer ist.

+1

In Ihrem Controller hilft, versuchen Sie, '$ scope.your_model_name_here =‚‘' –

+0

Ich versuchte es, aber das führte das gesamte Modell ein leerer String sein, und nicht einmal ein leeres Objekt wurde erstellt. Das explizite Initialisieren einer Eigenschaft zu einer Zeit wie in Shaunhusains Antwort funktioniert jedoch. – whirlwin

Antwort

9

Sie können einfach die Eigenschaften des Modells im Bereich definieren, bevor Sie sie in Ihrer Ansicht verwenden.

Wenn Sie Ihren Controller-Code zeigen, zeige ich Ihnen, was Sie aktualisieren müssen, um sie dem Bereich hinzuzufügen.

Es sollte so aussehen:

In Ihrem js-Datei, die die App

angular.module("MyModule", []).controller('MyCtrl', ['$scope', function ($scope) { 
    $scope.myModel = {name:""}; 
}]); 

<input type="text" ng-model="myModel.name"/> 

Hinweis in Ihrem HTML definiert Ich bevorzuge keine globalen Variablen/Funktionen Daher verwende ich eine andere Syntax, die von Angular zur Verfügung gestellt wird, um dies zu vermeiden und um eine Verkleinerung zu ermöglichen.

+0

Dies scheint der Weg zu sein, wie jetzt. – whirlwin

+0

Ja, denk dran, ich bin immer noch ein bisschen wie ein Angular Noob, aber ich benutze es jetzt mit großem Erfolg in drei Projekten, eines, an dem ich gerade arbeite, ist das bisher größte, aber all das Die gleichen Konzepte gelten unabhängig von der Skalierung. Nur lernen, Controller, Dienste und Direktiven zu machen, und Sie können fast alles tun, außerdem gibt es eine ziemlich ansehnliche Gemeinschaft, wie es scheint, und viele großartige Komponenten (ng-grid, google-maps, um ein paar zu nennen). Ich war noch nie ein jQuery-Typ, ich bin direkt von AS3/Flex gesprungen, also ist es ziemlich vertraut und sauber. Snags sind meist um Umfang Updates für mich. – shaunhusain

+0

Ja, ich freue mich definitiv auf die Verwendung von Angular in zukünftigen Projekten, im Gegensatz zu * nur * jQuery. – whirlwin

1

Sie sollten jQuery serialize nicht verwenden müssen.

<form ng-controller="MyCtrl" ng-submit="submit()"> 
    <input type="text" name="name" ng-model="formData.name"> 
    <input type="text" name="age" ng-model="formData.age"> 
    <input type="submit" value="Submit Form"> 
</form> 

function MyCtrl($scope) { 
    $scope.formData = {}; 

    $scope.submit = function() { 
     $http.post('/someUrl', $scope.formData) 
    }; 
} 

dass http $ So in können Sie einfach $ scope.formData passieren:

Das Formular sollte auf den Umfang wie diese gebunden werden.

Is there a more effective way to serialize a form with angularjs?

+0

Dies ist, was ich gerade mache. Das Hauptproblem ist jedoch, dass es ein leeres Objekt ('{}') bleibt und sich nicht um unbestimmte Werte kümmert, wenn Sie '$ scope.formData' sagen. Was ich brauche, ist etwas, das sicherstellt, dass die leeren Werte berücksichtigt werden. – whirlwin

+1

Oh, ich verstehe. In diesem Fall definieren Sie das Objekt in Ihrem Bereich wie folgt: $ scope.formData = {'name': null, 'age': null}; – StuR

10

Sie können versuchen auch:

<div ng-init="foo={}"> 
    <input type="text" ng-model="foo.name=''"/> 
</div> 

oder:

<input type="text" ng-init="foo.name=''"/> 

es präsentiert:

foo = { name: '', .... } 
+0

Danke dafür. Dies war die beste Lösung für meine kleine Anwendung, wo der Aufbau eines Controllers (noch) nicht notwendig ist. – drj

+0

Gut zu helfen: D – Neaped

0

Manchmal, Sie wissen nicht, ob die Wert ist gesetzt oder nicht. Dafür gibt es Standardwerte.

Ich benutze dies, wenn ich sicherstellen muss, dass eine Variable einen Wert hat. Sie können es in Ihrem Controller eingestellt

$scope.possiblyEmptyVariable = $scope.possiblyEmptyVariable || "default value"; 

ohne Angular große Werke als auch

// some object that may or may not have a property 'x' set 
var data = {}; 

// Set default value of "default" 
// carefull, values like 'null', false, 0 will still fall to defaults 
data.x = data.x || "default"; 

// Set default value of "default" 
// this will not fall to defaults on values like 'null', false, 0 
data.x = !"x" in data || "default"; 

Wenn Sie eine Reihe von Werten einstellen müssen, verwenden Sie angular.extend oder jQuery.verlängern

data.z = "value already set"; 
var defaults = { x: "default", y: 1, z: "default" }; 
var newData = angular.extend({}, defaults, data); 
// { x: "default, y: 1, z: "value already set" } 

Hoffnung, die

Verwandte Themen