Reset ng model from controller in ng-repeat

Question

I am trying to create a list of editable inputs from a list of items. I want the user to be able to edit any elements, but if they change, they can click the button and reset back to how it was.

While everything works for me, except reset.

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>

my controller

function TestController($scope) {

$scope.selected_item_backup = {};

$scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ];

$scope.reset = function (item) {
    // i know this wont work for many reasons, it is just an example of what I would like to do
    item = $scope.selected_item_backup;
};

$scope.copy = function (item) {
    angular.copy(item, $scope.selected_item_backup);
};
}

and here is the fiddle http://jsfiddle.net/ryanmc/1ab24o4t/1/

Keep in mind that this is a simplified version of my real code. My objects will have many editable fields. They are also not indexed, so you cannot rely on the index. I just want to be able to assign the original item on top of the new one and replace it.

Answer 1

jsfiddle

function TestController($scope) {

  $scope.list = [{
    value: 'value 1'
  }, {
    value: 'value 2'
  }, {
    value: 'value 3'
  }];
  var orgiinalList = [];
  angular.forEach($scope.list, function(item) {
    orgiinalList.push(angular.copy(item));
  });

  $scope.reset = function(index) {
    $scope.list[index] = angular.copy(orgiinalList[index]);
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
  <div ng-repeat="item in list">
    <label>Input {{$index+1}}:</label>
    <input ng-model="item.value" type="text" />
    <button ng-click="reset($index)">
      x
    </button>
  </div>
  {{list}}
  <br>
</div>

Hide result

Answer 2

angular, :

<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($index,item)"/>
        <button ng-click="reset($index,item)">
        x
        </button>
    </div>
    {{list}}<br>
    {{selected_item_backup}}

function TestController($scope) {
  $scope.selected_item_backup = [];   
  $scope.list = [ { value: 'value 1' }, { value: 'value 2' }, { value: 'value 3' } ];
  $scope.reset = function (index) {      
    $scope.list[index].value = $scope.selected_item_backup[index];
  };

  $scope.copy = function (index,item) {
    // backup the old value
    $scope.selected_item_backup[index] = item.value;
  };
}

Answer 3

reset , :

$scope.reset = function(index) {
    $scope.list[index].value = "value "+ (index+1); 
};

, reset , ...

Angular:

function TestController($scope) {

  $scope.selected_item_backup = {};

  $scope.list = [{
    value: 'value 1'
  }, {
    value: 'value 2'
  }, {
    value: 'value 3'
  }];

  $scope.reset = function(index) {
    $scope.list[index].value = "value " + (index+1);
  };

  $scope.copy = function(item) {
    angular.copy(item, $scope.selected_item_backup);
  };
}

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($index)">
      x
    </button>
  </div>
</div>

- , , $scope.list, ... , .