2013-07-01 8 views
10

ng-modelsにデフォルト値(''など)を設定できますか?ng-modelのAngularJSデフォルト値

私はjQueryのserialize関数を使用したフォームを持っていますが、値が存在しない場合は、それもシリアル化されたデータに含められます。 {name: '', age: ''}。私は角度の$httpを使用して$scopeからモデルを取得することにより、それを投稿してみてください使用している場合、それが空であるとき

しかし、それはundefinedとして表示されます。

+1

を助け

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" } 

希望を拡張し、私はそれを試してみました –

+0

'' $ scope.your_model_name_here =「」追加してみてください、それはでも、空の文字列であること、モデル全体の結果ではなく、空のオブジェクトが作成されました。しかし、シャンフーサインの答えのように、一度に明示的に1つのプロパティを初期化しています。 – whirlwin

答えて

9

ビューでモデルを使用する前に、スコープ内のモデルのプロパティを定義するだけで済みます。

コントローラコードが表示されたら、スコープに追加するために更新する必要があるものを表示します。

それは次のようになります。あなたのHTMLでアプリ

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

を定義し、あなたのjsファイルで

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

私は、グローバル変数/関数を持っていない好みます私はAngularが提供する別の構文を使用してこれを避け、縮小を可能にしています。

+0

これは今のところ行く方法と思われます。 – whirlwin

+0

覚えておいて欲しいのは、私はちょっと角度のあるノブですが、現在3つのプロジェクトで多くの成功を収めています。私が現在取り組んでいるプロジェクトは今のところ最大ですが、同じ概念が規模に関係なく適用される。コントローラー、サービス、および指令を作成することを学ぶだけで、何でもできるだけでなく、かなり大きなコミュニティが既に存在しており、素晴らしいコンポーネント(ng-grid、google-maps、カップルという名前)がたくさんあります。私はAS3/Flexから直接ジャンプしたjQueryの男ではありませんでした。スガグは主に私の範囲更新の周りにあります。 – shaunhusain

+0

はい、私は間違いなく* only * jQueryとは対照的に将来のプロジェクトでAngularを使用することを楽しみにしています。 – whirlwin

1

jQuery serializeを使用する必要はありません。 $ HTTPであなたは、単に$ scope.formDataを渡すことができるように

<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) 
    }; 
} 

フォームは、このような範囲にバインドする必要があります。

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

+0

これは私が現在行っていることです。しかし、主な問題は、空のオブジェクト( '{}')のままであり、 '$ scope.formData'と言うときは未定義の値を気にしないことです。私が必要とするのは、空の値が考慮されることです。 – whirlwin

+1

ああそうです。その場合、以下のようにスコープ上でオブジェクトを定義してください:$ scope.formData = {'name':null、 'age':null}; – StuR

10

また試みることがあります。

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

か:

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

を、それが提示されます場合

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

ありがとう。これはコントローラを構築する必要がない(まだ)私の小さなアプリケーションに最適なソリューションでした。 – drj

+0

うれしいこと:D – Neaped

0

を時々、あなたは知りません値が設定されているかどうか。これがデフォルトの設定です。

これは、変数にある値があることを確認する必要がある場合に使用します。あなたは、値の束を設定angular.extendかのjQueryを使用する必要がある場合

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

が同様

// 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"; 

アンギュラずに素晴らしい作品あなたのコントローラでそれを設定することができます。お使いのコントローラで

関連する問題