如何实现在angularjs编辑功能的取消按钮

问题描述

我已经使用Edit按钮。编辑后，我已保存和取消按钮.save按钮工作，因为我预期，但没有取消按钮。
      如果我点击尝试编辑后取消按钮，就应该表现出previous文本。任何人都可以请帮我结果
这里的js小提琴

 ＆LT; TR NG重复=项中的项目＆GT;
        ＆所述; TD＆GT;
            ＆LT;跨度NG隐藏=item.editing＆GT; {{item.name}}＆LT;按钮NG点击=editItem（项目）＆gt;编辑＆LT; /按钮＆GT;＆LT; / SPAN＆GT;
            ＆LT;输入NG秀=item.editingNG模型=item.name自动对焦/＆GT;
            ＆LT;按钮NG秀=item.editingNG点击=doneEditing（项目）＆GT;保存＆LT; /按钮＆GT;
             ＆LT;按钮NG秀=item.editingNG点击=取消（项目）＆GT;取消＆LT; /按钮＆GT;
        ＆LT; / TD＆GT;
    ＆LT; / TR＆GT;
 

解决方案

请您对象的副本，你要编辑。如果preSS取消更换原点。请参阅

  $ scope.editItem =功能（项目）{
        item.editing =真;
        item.backupName = angular.copy（item.name）;
    }    $ scope.doneEditing =功能（项目）{
        item.editing = FALSE;
        删除item.backupName;
        //洞的一些背景AJAX调用持久性...
    };
    $ scope.Cancel =功能（项目）{
        item.editing = FALSE;
        item.name = angular.copy（item.backupName）;
        删除item.backupName;
    };
 

i have used edit button. after editing i have save and cancel button .save button is working as i expected but not the cancel button. if i click the cancel button after trying to edit, it should show the previous text. can anyone please help me
js fiddle here http://jsfiddle.net/F7K63/143/

 <tr ng-repeat="item in items">
        <td>
            <span ng-hide="item.editing">{{item.name}} <button  ng-click="editItem(item)">Edit</button></span>
            <input ng-show="item.editing" ng-model="item.name"  autofocus />
            <button ng-show="item.editing" ng-click="doneEditing(item)">Save</button>
             <button ng-show="item.editing" ng-click="Cancel(item)">Cancel</button>
        </td>
    </tr>

解决方案

Make a copy of your object that you want to edit. If you press cancel replace the origin. See the fiddle

$scope.editItem = function (item) {
        item.editing = true;
        item.backupName = angular.copy(item.name);
    }

    $scope.doneEditing = function (item) {
        item.editing = false;
        delete item.backupName;
        //dong some background ajax calling for persistence...
    };
    $scope.Cancel = function (item) {
        item.editing = false;
        item.name = angular.copy(item.backupName);
        delete item.backupName;
    };

这篇关于如何实现在angularjs编辑功能的取消按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！