angularjs ng-repeat内の双方向バインディング

テンプレートにレンダリングしたいフィールドの束のルックアンドフィールを定義するAngularコントローラ変数があります。私の基礎となるモデルの初期値はinput要素に正しく現れますが、その要素の内容を変更しても変化しません。ここでangularjs ng-repeat内の双方向バインディング

いくつかのコードです：

app.js

(function() { 
    var app = angular.module("my_app", []); 
    app.controller("MyController", function() { 
     var my_controller = this; 
     my_controller.model = { 
     "first_name": "fred", 
     "last_name": "jones" 
     } 
     my_controller.fields = [ 
     { 
      "name": "first_name", 
      "label": "First Name", 
      "is_required": true, 
      "model": my_controller.model.first_name 
     }, 
     { 
      "name": "last_name", 
      "label": "Last Name", 
      "is_required": true, 
      "model": my_controller.model.last_name 
     } 
     ] 
})();

template.html：

<div ng-app="my_app"> 
    <div ng-controller="MyController as my_controller"> 
    <div ng-repeat="field in my_controller.fields"> 
     {% verbatim ng %} 
     <label for="id_{{ field.name }}" ng-class="field.is_required ? 'required' : 'optional'">{{ field.label }}:&nbsp;</label> 
     <input type="{{ field.type }}" class="form-control" name="{{ field.name }}" id="id_{{ field.name }}" ng-model="field.model"> 
     {% endverbatim ng %} 
    </div> 
    </div> 
</div>

（「{％逐語的に心配しないでくださいng％} "stuff - ちょうどb/c私はDjangoを使っています）

これは、それぞれ「fred」と「jones」の初期値を持つ2つの入力フィールドを正しく表示します。しかし、これらのフィールドの値を変更すると、my_controller.modelオブジェクトに対応する変更はありません。

ヒント

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

出典

2017-10-31 trubliphone

？ –

@AlekseySolovey - ありがとう。この例を配列に変更しました。しかし、エラーは依然として残っています。 – trubliphone

'user_controller'とは何ですか？あなたのコントローラが 'my_controller'の場合。 –

この場合、"model": user_controller.model.first_nameはmodelフィールドに値を割り当て、my_controller.model.field_nameへの参照を作成しません。

あなたは、単にmy_controller.modelフィールドを変更するbracket notationを使用することができますあなたの変数 `my_controller.fields`が配列でないとき、なぜあなたは` NG-repeat`を使用している

angular.module('app', []) 
 
.controller('testController', 
 
    function testController($scope) { 
 
    
 
     var my_controller = this; 
 
     
 
     my_controller.model = { 
 
     first_name: "fred", 
 
     last_name: "jones" 
 
     }; 
 
     
 
     my_controller.fields = [ 
 
     { 
 
      "name": "first_name", 
 
      "label": "First Name", 
 
      "is_required": true 
 
     }, 
 
     { 
 
      "name": "last_name", 
 
      "label": "Last Name", 
 
      "is_required": true 
 
     } 
 
     ]; 
 
     
 
});

<body ng-app="app"> 
 
<div class="table-responsive" ng-controller="testController as my_controller"> 
 
     <div ng-repeat="field in my_controller.fields"> 
 
    
 
     <label for="id_{{ field.name }}" ng-class="field.is_required ? 'required' : 'optional'">{{ field.label }}:&nbsp;</label> 
 
     <input type="{{ field.type }}" class="form-control" name="{{ field.name }}" id="id_{{ field.name }}" ng-model="my_controller.model[field.name]"> 
 

 
    </div> 
 
    ----------------------------------- 
 
    <br/> 
 
    <code>{{my_controller.model}}</code> 
 
</div> 
 
</body> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

出典

2017-10-31 17:08:18

ありがとうございます。これは間違いなく正しい方向です。私の実際のモデルはかなり複雑ですが、私はすぐに作業してこの答えを受け入れることができると確信しています。 – trubliphone

スタニスラフの答えは正しいです。しかし、非常に複雑なモデルのパス（ 'model.submodel.submodel [23] .property'）では、[この回答]（https://stackoverflow.com/a/42562330/1060339）が非常に役に立ちました。 – trubliphone

私は同意します、これはかなり単純なモデルです。より複雑な場合は、他のポストからのあなたの言及された答えが動作します。とにかく、これを並べ替えることができてうれしいです。 –

angularjs ng-repeat内の双方向バインディング

答えて

関連する問題