HardikT
HardikT

Reputation: 751

Watching over one ng-model and applying the changes to another ng-model in ng-repeat

I have the following work-case -

In html, I'm populating table data from an API response using ng-repeat. There are two different columns in the table both having different ng-models. One column would be having the data that is obtained from the response while the other column would be blank when the table loads.

What I'm looking for is when the user enters some value in the second column and saves the data, the data should then be reflected in the first column.

I used $watch in the loop but apparently the value that is obtained at the last iteration of the loop is stored and reflected in the first column. I also looked into watchGroup but that is valid for Angular versions 1.3 and above while the version that I'm using is 1.1

HTML -

<div ng-repeat="data in response">
  <table>
    <tr ng-repeat="dt in data track by $index">
      <td>
         <input id="oldValue_{{$index}}" ng-model="dt.oldValue[$index]" />
      </td>
      <td>
        <input id="newValue_{{$index}}" ng-model="newValue[$index]" />
      </td>
      <td>
        {{dt.otherData}}
      </td>
    </tr>
  </table>
</div>
<div>
  <button type="button" class="btn btn-primary" value="save" ng-click="saveData()">Save</button>
  <button type="button" class="btn btn-primary" value="save" ng-click="cancel()">Cancel</button>
</div>

Controller -

angular.module("MyApp",[])
.controller("MyCtrl",[]);
function MyCtrl() {
$scope.saveData = function() {
  for(var i=0; i<$scope.response.length; i++) {
    for(var j=0: j<$scope.response[i].innerData.length; j++) {
      var oldData = document.getElementById("oldValue_"+j).value;
      var newData = document.getElementById("newValue_"+j).value;
        if(newData > 0) {
          $scope.$watch('newValue['+j+']', function(newVal) {
          $scope.dt.oldValue[j] = newVal;
          },true);
        }
      }
    }
  }
}

Here's an image giving a brief idea of the issue -

enter image description here

EDIT -

The response json object is as such (field sselected - measurementData is the one that is displayed in first column) -

enter image description here

Also the response is as such -

{
  "id": 1,
  "OuterData": [
    {
      "InnerId": 4,
      "InnerData": [
        {
          "CollectionId": 35,
          "CollectionData": [
            {
              "DataId": 81,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_1",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-29T14:57:42Z",
                  "measurementData": 400.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_1",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 521103.0
            },
            {
              "quantityUnitName": "Unit_1",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 24814.428571428572
            }
          ]
        },
        {
          "CollectionId": 24,
          "CollectionData": [
            {
              "DataId": 58,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_2",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-26T08:50:00Z",
                  "measurementData": 9925.0
                }
              ]
            },
            {
              "DataId": 57,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_2",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-26T08:50:00Z",
                  "measurementData": 46285.0
                }
              ]
            },
            {
              "DataId": 56,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_2",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-26T08:50:00Z",
                  "measurementData": 13465.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_2",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 1561344.0
            },
            {
              "quantityUnitName": "Unit_2",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 21685.333333333332
            }
          ]
        },
        {
          "CollectionId": 30,
          "CollectionData": [
            {
              "DataId": 76,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_3",
                  "quantityUnitSymbol": "UnitSymbol_1",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-03-21T14:00:00Z",
                  "measurementData": 16370.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_3",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 301720.0
            },
            {
              "quantityUnitName": "Unit_3",
              "quantityUnitSymbol": "UnitSymbol_1",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 15086.0
            }
          ]
        }
      ]
    },
    {
      "InnerId": 3,
      "InnerData": [
        {
          "CollectionId": 20,
          "CollectionData": [
            {
              "DataId": 40,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_4",
                  "quantityUnitSymbol": "UnitSymbol_2",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-01T10:39:00Z",
                  "measurementData": 0.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_4",
              "quantityUnitSymbol": "UnitSymbol_2",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 0.0
            },
            {
              "quantityUnitName": "Unit_4",
              "quantityUnitSymbol": "UnitSymbol_2",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 0.0
            }
          ]
        },
        {
          "CollectionId": 18,
          "CollectionData": [
            {
              "DataId": 35,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_5",
                  "quantityUnitSymbol": "UnitSymbol_3",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-18T11:05:22Z",
                  "measurementData": 0.001135
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_5",
              "quantityUnitSymbol": "UnitSymbol_3",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 0.001135
            },
            {
              "quantityUnitName": "Unit_5",
              "quantityUnitSymbol": "UnitSymbol_3",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 0.001135
            }
          ]
        },
        {
          "CollectionId": 40,
          "CollectionData": [
            {
              "DataId": 36,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_5",
                  "quantityUnitSymbol": "UnitSymbol_3",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-18T11:05:22Z",
                  "measurementData": 1.132728
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_5",
              "quantityUnitSymbol": "UnitSymbol_3",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 1.132728
            },
            {
              "quantityUnitName": "Unit_5",
              "quantityUnitSymbol": "UnitSymbol_3",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 1.132728
            }
          ]
        },
        {
          "CollectionId": 10,
          "CollectionData": [
            {
              "DataId": 2,
              "CoreData": [
                {
                  "quantityUnitName": "Unit_6",
                  "quantityUnitSymbol": "UnitSymbol_4",
                  "dataUpdateDateTime": "2017-04-27T05:28:11Z",
                  "lastReadingDateTime": "2017-04-14T01:29:00Z",
                  "measurementData": 120.0
                }
              ]
            }
          ],
          "ExtraData": [
            {
              "quantityUnitName": "Unit_6",
              "quantityUnitSymbol": "UnitSymbol_4",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 15508.363130715883
            },
            {
              "quantityUnitName": "Unit_6",
              "quantityUnitSymbol": "UnitSymbol_4",
              "dataUpdateDateTime": "2017-04-27T05:28:11Z",
              "lastReadingDateTime": "2016-05-01T00:01:40Z",
              "measurementData": 1.2595113401052451
            }
          ]
        }
      ]
    }
  ]
}

Upvotes: 1

Views: 60

Answers (1)

Jenny
Jenny

Reputation: 663

Do you want something like this? Its just simple example changes will be require according to you response data.

var MyApp = angular.module("MyApp",[]);
MyApp.controller("MyCtrl",['$scope',MyCtrl]);
function MyCtrl($scope) {
$scope.data= [1,2,3,4,5];
$scope.newValue = [];
$scope.saveData = function() {
   if($scope.newValue.length > 0) { 
    angular.forEach($scope.newValue,function(v,k){        
        $scope.data[k] = v;   
    });
    }
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="MyApp"  ng-controller="MyCtrl">
  <table>
    <tr ng-repeat="dt in data track by $index">
      <td>{{dt}}
         <input id="oldValue_{{$index}}" ng-model="dt" />
      </td>
      <td>
        <input id="newValue_{{$index}}" ng-model="newValue[$index]" />
      </td>
      <td>
        {{dt.otherData}}
      </td>
    </tr>
  </table>
<div>
  <button type="button" class="btn btn-primary" value="save" ng-click="saveData()">Save</button>
  <button type="button" class="btn btn-primary" value="save" ng-click="cancel()">Cancel</button>
</div>
</div>

Upvotes: 1

Related Questions