reset button in angular js

Question

I have a "clear" button, once user hit it all the data in container,all binding and the radio buttons should be reset (like initially). Currently only the view becomes empty but the container has still the old value. How can I fix it?

<div class="field">
         <textarea name="price" ng-model="list.price"></textarea>
</div>

 <input type="radio" ng-model="list.phone" value="1" />cell
 <input type="radio" ng-model="list.phone" value="2" />home

<button class="btn btn-primary btn-large center" type="reset"  ng-click="">
                        Clear
</button>

Tom · Accepted Answer · 2014-03-17 17:18:34Z

12

Set ng-click to some function, say reset()

<button class="btn btn-primary btn-large center" 
        type="reset" 
        ng-click="reset()">Clear
</button>

and then set the model to an empty object

$scope.reset = function() {
    $scope.list = {};
}

Or, if $scope.list is prepopulated, you could do something like this (taken from angular docs):

function Controller($scope) {
    $scope.master = {};

    $scope.reset = function() {
      $scope.list = angular.copy($scope.master);
    };

    $scope.reset();
}

edited Mar 17, 2014 at 17:18

answered Mar 17, 2014 at 16:53

Tom

7,7401 gold badge26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sara Over a year ago

Thanks, how about radio buttons? how to reset them?

Tom Over a year ago

This would reset the radio buttons in your example jsBin

Sara Over a year ago

Thanks Tom. I don't why people gave me -1:(

Collectives™ on Stack Overflow

reset button in angular js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related