入れ子のng-repeat内でAngularjsモデルが更新されない

Question

入れ子になったng-repeatを使用して、オブジェクトの配列のプロパティを循環させ、オブジェクトの値のモデルを入力にバインドします。 問題は、入力内の値が変更されたときにモデルが更新されないということです。

var app = angular.module('app', []); 
 
app.controller('main', function($scope) { 
 
    var vm = this; 
 
    vm.data = [{ 
 
    "user": "*US/", 
 
    "lowFare": "*TP/<amount>/S<segment>/P<passenger>", 
 
    "fullFare": "*PR/<amount>/S<segment>/P<passenger>", 
 
    "selectedReason": "*REA/" 
 
    }, { 
 
    "user": "US/", 
 
    "selectedReason": "REA/" 
 
    }]; 
 
    vm.description = { 
 
    "user": "User", 
 
    "lowFare": "Lowest fare *", 
 
    "fullFare": "Fare without restrictions *", 
 
    "selectedReason": "Reason for applying the fare" 
 
    }; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-cloak> 
 
    <div ng-controller="main as ctrl"> 
 
    <div ng-repeat="block in ctrl.data"> 
 
     <h4 align="center">block number {{$index}}</h4> 
 
     <table align="center"> 
 
     <tr ng-repeat="(key,value) in block" align="center"> 
 
      <td><span>{{ctrl.description[key]}}: &emsp;</span> 
 
      </td> 
 
      <td> 
 
      <input ng-model="value" /> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    <h3 align="center"> 
 
      <br/>Modify something and see that the model doesn't change: &emsp; 
 
      <br/> 
 
      </h3> 
 
    <p> 
 
     {{ctrl.data}} 
 
    </p> 
 
    </div> 
 
</div>

フィドル：= "値" NG-モデルをするhttps://jsfiddle.net/Kitra/qtxx9y35/

Answer 1

だけで変更NG-モデル= "ブロック[キー]" とあなたは仕事を得るでしょう。

私は確信していませんが、プリミティブ値が値渡しの間、javascriptがオブジェクトと配列を参照するという事実に関係していると思います。

var app = angular.module('app', []); 
 
app.controller('main', function($scope) { 
 
    var vm = this; 
 
    vm.data = [{ 
 
    "user": "*US/", 
 
    "lowFare": "*TP/<amount>/S<segment>/P<passenger>", 
 
    "fullFare": "*PR/<amount>/S<segment>/P<passenger>", 
 
    "selectedReason": "*REA/" 
 
    }, { 
 
    "user": "US/", 
 
    "selectedReason": "REA/" 
 
    }]; 
 
    vm.description = { 
 
    "user": "User", 
 
    "lowFare": "Lowest fare *", 
 
    "fullFare": "Fare without restrictions *", 
 
    "selectedReason": "Reason for applying the fare" 
 
    }; 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-cloak> 
 
    <div ng-controller="main as ctrl"> 
 
    <div ng-repeat="block in ctrl.data"> 
 
     <h4 align="center">block number {{$index}}</h4> 
 
     <table align="center"> 
 
     <tr ng-repeat="(key,value) in block" align="center"> 
 
      <td><span>{{ctrl.description[key]}}: &emsp;</span> 
 
      </td> 
 
      <td> 
 
      <input ng-model="block[key]" /> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    <h3 align="center"> 
 
      <br/>Modify something and see that the model doesn't change: &emsp; 
 
      <br/> 
 
      </h3> 
 
    <p> 
 
     {{ctrl.data}} 
 
    </p> 
 
    </div> 
 
</div>

Answer 2

このようなあなたの "NG-モデル" 属性変更してみてください：

<input ng-model="block[key]" /> 

https://jsfiddle.net/mladenplavsic/qtxx9y35/51/