Модель Angularjs не обновляется внутри вложенного ng-повтора

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>

Fiddle: https://jsfiddle.net/Kitra/qtxx9y35/

Answer 1

Просто изменение нг-модель = "значение" в нг-модель = "блок [ключ]", и вы будете получить работу.

Я не уверен, но, я думаю, это связано с тем, что 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

Попробуйте изменить "нг-модель" атрибута, как это:

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

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