I'm working on creating a list of editable inputs based on a set of items. I want users to have the ability to edit any item, with an option to reset it back to its original state if they change their minds.
Everything is functioning well so far, except for the reset feature.
Here's my HTML:
<div ng-app ng-controller="TestController">
<div ng-repeat="item in list">
<label>Input {{$index+1}}:</label>
<input ng-model="item.value" type="text" ng-click="copy(item)"/>
<button ng-click="reset(item)">
x
</button>
</div>
{{list}}<br>
{{selected_item_backup}}
</div>
This is my controller code:
function TestController($scope) {
$scope.selected_item_backup = {};
$scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ];
$scope.reset = function (item) {
// This code snippet is just a representation of what I aim to achieve as I understand that it may not work due to various reasons.
item = $scope.selected_item_backup;
};
$scope.copy = function (item) {
angular.copy(item, $scope.selected_item_backup);
};
}
You can also access the coded example through this fiddle: http://jsfiddle.net/ryanmc/1ab24o4t/1/
Please note that this simplified version does not reflect the complexity of my actual project. The objects will have multiple editable fields each, and they won't be indexed, making reliance on index numbers impossible. My main goal is to replace the new item with the original one by stacking them on top of each other.