javascript - reset ng-model from controller in ng-repeat -
i trying create list of editable inputs list of items. want user able edit of items, if change there mind can click button , reset way was.
so far have working 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) { // know wont work many reasons, example of item = $scope.selected_item_backup; }; $scope.copy = function (item) { angular.copy(item, $scope.selected_item_backup); }; } and here fiddle http://jsfiddle.net/ryanmc/1ab24o4t/1/
keep in mind simplified version of real code. objects have many editable fields each. not indexed, , index cannot relied on. want able assign original item on top of new , have replaced.
this work solution 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>
Comments
Post a Comment