Reputation: 751
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-model
s. 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 -
EDIT -
The response json object is as such (field sselected - measurementData is the one that is displayed in first column) -
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
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