Temporary ng-model? - angularjs

Question

I have a table that displays SQL data. I'm trying to only allow the user to edit an entry within a row if that value already exists somewhere in that column.
For example, if I tried to change the value "Strawberry" in the column "Fruit" to "Grape", when I click out of the text field, it should only keep the value "Grape", if it already exists within the column "Fruit". Otherwise, it should return to "Strawberry".
I am trying to accomplish this like so:
On ng-focus, I call recordValue(). This gets the entire row, the column, and the value, and sets it in a separate variable.
On ng-blur, I call validateValue(), and check all of my rows for
a) the original row index
b) to see if the value exists already in any row in the table
c) if it does, keep it, else revert to original value
(use the original row variable to replace edited row at original row index)
However, the row I pass is an ng-model of row[column] (value of a column in a row). This means that I can't have the original value of the row, because it will update the original data as I change it.
To solve this, I created a $watch on the data. If the value for $scope.validated was true, update the variable the table uses as a data source. Otherwise, don't. $scope.validated is set to false when recordValue() is called, and true after looping through validateValue() and finding the value, or resetting it.
The problem is, the data still updates so I can't revert the value because the original row doesn't exist; when I loop through the data source, only the updated row exists. I can't find the original row to revert to.
I'm not sure why this is happening. Am I doing something incorrectly?
HTML:
<table>
<tr>
<th ng-repeat="columnName in columnArray">{{columnName}}</th>
</tr>
<tr ng-repeat="row in filteredData">
<td ng-repeat="columnName in columnArray">
<input ng-model="row[columnName]" ng-focus="recordValue(row,row[column])" ng-blur="validateValue(row,column,row[column])">
</td>
</tr>
</table>
Angular:
$scope.recordValue = function (row, val) {
$scope.originalRow = row;
$scope.originalValue = val;
$scope.validated = false;
};
$scope.validateValue = function (row, column, val) {
// row is the row of data the text field is in
// column is column name at row
// val is value at column in row(ng-model on $scope.data)
var indexOfOriginalRow;
for (var i = 0; i < $scope.data.length; i++) {
var currentRow = $scope.data[i];
if (currentRow == $scope.originalRow) {
console.log("found it!");
indexOfOriginalRow = i;
}
else if (currentRow[column] == val) {
$scope.validated = true;
// the value was found, keep it as is
return;
}
}
$scope.validated = true;
$scope.data[index][column] = $scope.originalValue;
};
$scope.$watch("data", function () {
if ($scope.validated) {
$scope.filteredData = doStuffWithData($scope.data);
}
}, true);
Each row is an object within an array (the datasource). When the values change, I update the PARENT data source, but not the data source the table uses. Unfortunately, it seems as though the table's data source (filteredData) updates anyways.
This prevents me from resetting the value of the text field because the value is updated in the data source, so it seems like it already exists in the table. It appears to be a logical error, but it is difficult to conceptualize the table and variable data structure, so I can't find the error.
UPDATE:
Even when I only store the value, and not reference of the original row, the bigger problem is that the data still updates. The original row is useless because the new row is already in the data source, meaning it will be found, viewed as a pre-existing value, and allow anything you type. Very frustrating.

Answer 1

Try using angular.copy() to store the value of row in $scope.originalRow without binding them.

Answer 2

I think you will always set $scope.validated = true and return because you are checking the updated row with the updated value. Try adding an else:
for (var i = 0; i < $scope.data.length; i++) {
var currentRow = $scope.data[i];
if (currentRow == $scope.originalRow) {
console.log("found it!");
indexOfOriginalRow = i;
} else if (currentRow[column] == val) { // ADDED ELSE
$scope.validated = true;
// the value was found, keep it as is
return;
}
}