Cancel / Undo in AngularJs – How to revert data ?

Consider the following buttons

  • Edit
  • Save
  • Cancel

When user clicks edit and changes data and then uses the cancel button to get the old data, here is how you could implement this.

HTML

<div>
    <button data-ng-click="edit()" data-ng-show="!editing">Edit</button>
    <button data-ng-click="save()" data-ng-show="editing">Save</button>
    <button data-ng-click="cancel()" data-ng-show="editing">Cancel</button>
</div>

AngularJs

$scope.edit = function () {
    $scope.editing = true;
    $scope.copy = angular.copy($scope.data);
};

$scope.cancel = function () {
    $scope.editing = false;
    $scope.data = $scope.copy;
};

References

How to use angular ng attributes with TextBoxFor, EditorFor in Razor and ASP.NET MVC

New to angular.js today I tried to add ng-model data attribute to my textbox on my login form. The login form uses Html.TextboxFor helper. I tried the following but visual studio showed me an error

@Html.TextBoxFor(m => m.UserName, new { ng-model="user.name" })

in C# - is not valid.

So here’s a workaround for the same. Use _ (underscore) and Razor will convert the underscore to dash automatically.

This is what worked for me.

@Html.TextBoxFor(m => m.UserName, new { ng_model="user.name" })

Hope this helps. Had posted a question on stackoverflow too – Using angular attributes with TextBoxFor in ASP.NET MVC