How to remove/clear scope variable on ng-change

Question

I have a dropdown with a ng-change event handler:

            <label>Person:</label>
            <select class="form-control" ng-model="select" ng-change="change()">
              <option value="0">a </option>
              <option value="1">b </option>
              <option value="2">c </option>
            </select>

On change i assign data from an array to $scope.person:

  $scope.change = function(){
        $scope.person = $scope.persons[$scope.select]; 
 };

The array:

  $scope.persons = [
       {'name': 'Peter'},
       {'name': 'John'},
       {'name': 'Mark'}
];

When a person is selected (for example $scope.select == 0/Peter) there is a possibility to add a value to that person ($scope.person.value) via radio buttons:

<label><input type="radio" ng-model="person.value"  value="1"> Value 1 </label><br/>
<label><input type="radio" ng-model="person.value"  value="2"> Value 2</label><br/>
<label><input type="radio" ng-model="person.value"  value="3"> Value 3</label><br/>

When a value ($scope.person.value) is added to a person, and i change the dropdown I want to remove/clear that value. So that when you reselect that person in the dropdown $scope.person.value is undefined.

  $scope.change = function(){
    //This is not working
   delete $scope.person;
   // This is not working either
    $scope.person.value = '';

    $scope.person = $scope.persons[$scope.select]; 

 };

I want to know how to clear the value stored in $scope.person.value on change of the dropdown. Now the variable is still defined when I reselect the person. Here is a working example.

Answer 1

I think the variable is still saved, you should remove the value by yourself:

$scope.change = function(){
        delete $scope.person;
        $scope.person = '';             
        $scope.person = $scope.persons[$scope.select];
        //Remove the assigned value
        delete $scope.person.value;
};

Answer 2

your problem is here,

$scope.person = $scope.persons[$scope.select];

when you do this, and then assign a 'value' property, you actually modify the object in the persons array. try below,

$scope.change = function() {
    $scope.person = angular.copy($scope.persons[$scope.select]); 
    console.log($scope.person);
  };

  $scope.$watch('person.value', function(n) {
    console.log(n);
  });

Answer 3

As @Kevin Sanchez say, you need delete value from person.

Like this delete $scope.person.value;

Live example on jsfiddle.

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {



  $scope.persons = [{
    'name': 'Peter'
  }, {
    'name': 'John'
  }, {
    'name': 'Mark'
  }];

  $scope.change = function() {
    if ($scope.person)
      delete $scope.person.value;

    $scope.person = $scope.persons[$scope.select];
  };


}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">

    <label>Person:</label>
    <select class="form-control" ng-model="select" ng-change="change()">
      <option value="0">a</option>
      <option value="1">b</option>
      <option value="2">c</option>
    </select>

    <br>
    <br>{{ person }}
    <br>
    <br>
    <label>
      <input type="radio" ng-model="person.value" value="1">Option 1</label>
    <br/>
    <label>
      <input type="radio" ng-model="person.value" value="2">Option 2</label>
    <br/>
    <label>
      <input type="radio" ng-model="person.value" value="3">Option 3</label>
    <br/>


  </div>
</div>