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, Nov 26 '13 at 15:12

Mário · Answer 1 · 2013-11-26T15:22:18.207

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 "".

Maxim Shoustin · Answer 2 · 2013-11-26T15:31:17.810

0

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

Make code simple and readable.

edited Nov 26 '13 at 15:31

answered Nov 26 '13 at 15:11

Maxim Shoustin

78,004
28
199
222

1

So as I know there is no way. – Maxim Shoustin Nov 26 '13 at 15:13

score 0 · Answer 3 · answered Nov 26 '13 at 15:14

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.

score 0 · Answer 4 · answered Nov 26 '13 at 15:16

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 '13 at 15:16

Davin Tryon

64,963
15
144
131

score 0 · Answer 5 · edited May 23 '17 at 11:56

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 '17 at 11:56

Community

1
1

answered Nov 26 '13 at 15:27

ssilas777

9,476
4
43
66

This gives the error: TypeError: Object # – panthro Nov 26 '13 at 15:40
Fixed the error but this still does not work, it erases the entire form. – panthro Nov 26 '13 at 15:43
It should n't check the demo – ssilas777 Nov 26 '13 at 15:47
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. – panthro Nov 26 '13 at 15:52

Clearing fields with angular?

5 Answers5

Short answer

Long answer