Clearing fields with angular?

Question

When the user clicks on a radio button I run:

$scope.clientClick = function() {

    //do stuff
}

I have a form, and I would like half of the fields on the form to be cleared in the above method.

I have done:

 $scope.clientClick = function() {

    $scope.entry.first_name = '';
    $scope.entry.last_name = '';
    $scope.entry.email = '';
    $scope.entry.tel = '';
    $scope.entry.gender = '';
    $scope.entry.job = '';
    $scope.entry.age = '';
}

But is there an easier way rather than listing each field again?

@smk no, it clears the entire form, I only want part of it cleared. — panthro
– panthro, Commented Nov 26, 2013 at 15:12

Roberto Bonvallet · Accepted Answer · 2013-11-26 15:14:44Z

0

Short answer

['first_name', 'last_name', ...].forEach(function (f) {
    $scope.entry[f] = '';
});

Long answer

In JavaScript, properties can be accessed in two ways:

obj.prop
obj['prop']

You can keep a list of strings with the properties that you want to clear, and then just iterate over it clearing each in turn.

answered Nov 26, 2013 at 15:14

Roberto Bonvallet

33.7k5 gold badges45 silver badges57 bronze badges

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

Comments

Davin Tryon · Accepted Answer · 2013-11-26 15:16:47Z

0

I'd suggest that if you have a dependency to the radio button then the view model should reflect that it could be cleared:

$scope.entry.dependant = { first_name: '' ... }

$scope.clientClick = function() {

    $scope.entry.dependant = {};
}

answered Nov 26, 2013 at 15:16

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Comments

Mário · Accepted Answer · 2013-11-26 15:22:18Z

0

function initObject(obj) {
  for (var i in obj) {
    if (obj.hasOwnProperty(i)) {
      switch(typeof obj[i]){
        case 'string':
          obj[i] = '';
          break;
        case 'number':
          obj[i] = 0;
          break;
      }
    }
  }
}

Use this function. NEVER do this $scope.entry = {} or $scope.entry.name = null, it's safer and you won't get unnecessary errors when you have some parts of your code that expect a type. It's a lot easier just to set a string to "".

edited Nov 26, 2013 at 15:22

answered Nov 26, 2013 at 15:09

Mário

1,61215 silver badges24 bronze badges

Comments

Maxim Shoustin · Accepted Answer · 2013-11-26 15:31:17Z

0

I would use $scope.entry = null or $scope.entry = {}.

Make code simple and readable.

edited Nov 26, 2013 at 15:31

answered Nov 26, 2013 at 15:11

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

1 Comment

Maxim Shoustin Over a year ago

So as I know there is no way.

Community · Accepted Answer · 2017-05-23 11:56:07Z

0

I would have done some thing like Reset a model with angular.js:

$scope.initial = [
  {
    first_name : '',
    last_name : '',
    email : '',
    tel : '',
    gender : '',
    job : '',
    age : ''
  }            
];

Demo

$scope.clientClick = function() {
  angular.copy($scope.initial, $scope.entry);
});

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Nov 26, 2013 at 15:27

ssilas777

9,7704 gold badges48 silver badges70 bronze badges

4 Comments

panthro Over a year ago

This gives the error: TypeError: Object #<Object> has no method 'push'

panthro Over a year ago

Fixed the error but this still does not work, it erases the entire form.

ssilas777 Over a year ago

It should n't check the demo

panthro Over a year ago

Your demo does not reflect the question. It clears the entire set of data, I would like, for example in your demo, for last name to stay there when you click reset.

Collectives™ on Stack Overflow

Clearing fields with angular?

5 Answers 5

Short answer

Long answer

Comments

Comments

Comments

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Short answer

Long answer

Comments

Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related