2016-07-10 17 views
0

私はAngularを使用しています。正しく表示されていても、動的に作成されたオブジェクトを編集することはできません。動的に作成されたオブジェクトの角度結合

<html> 
    <head> 
    </head> 
    <body ng-app='TestApp'> 
    <div ng-controller='TestCtrl'> 
     <input ng-model="newModel().name"/> 
    </div> 
    </body> 
</html> 

そして、次のコントローラの実装:

var TestApp = angular.module("TestApp", []); 

    function TestCtrl($scope) { 
     $scope.newModel = function(){ 
     return { name: 'Fresh' }  
     } 
    } 

私はいくつかのロジックを実行する必要があるので、私は結合するための正しいオブジェクトを返すようにメソッドを使用してい

私は、次のビューを持っていますどのオブジェクトをバインドするかを決定します。 入力フィールドには、動的に作成された正しい値が表示されます。しかし、私はそれを編集することはできません。

私は間違っていますか?このような機能を実現するには間違った方法ですか?

ありがとうございました。

+0

なぜあなたはそれを機能として必要としていますか?スコープ変数として直接宣言できませんか? – Chinni

+1

角度が式を評価するたびに新しいオブジェクトが作成されるため、編集できません。それは意味をなさない。オブジェクトを一度作成し、そのオブジェクトをスコープに格納します。 –

+0

@Chinni - バインディングに正しいオブジェクトがどれかを動的に判断する必要があります。データ構造内の既存のオブジェクトを見つけたり、新しいオブジェクトを初期化したりする必要があります。 – Dani

答えて

1

オブジェクトを返す代わりに、スコープに関数を追加する代わりに、関数内の変数scopeを更新することができます。

コントローラーコード:

var TestApp = angular.module("TestApp", []); 

function TestCtrl($scope) { 
    $scope.newModel = {}; // initialize the scope variable 
    function updateScope() { 
     // do some logic 
     $scope.newModel = { name: 'Fresh' }; // update it with the required object 
    } 

    updateScope(); // run the function 
} 

HTMLコード:これで問題が解決し

<body ng-app='TestApp'> 
    <div ng-controller='TestCtrl'> 
     <!-- remove `()` since `newModel` is no longer a function --> 
     <input ng-model="newModel.name"/> 
    </div> 
</body> 

希望。

関連する問題