CODEWITHSUNDEEP
angularjs
osueboy
osueboy

Reputation: 143

Angular ng-if how do i reset the value of the model, in an angular way

<div ng-app>
<form ng-controller='chip'>
    <select data-ng-options="n for n in simOptions" data-ng-model="simQuantity"></select>
    <div ng-if="simQuantity>=1">     
        <select name="sim" ng-model="formData.sim[0]" ng-options="sim for sim in sims" ></select>
    </div>
    <div class="suscriptor_fields" ng-if="simQuantity>=2">     
        <select name="sim" 
        ng-model="formData.sim[1]" 
        ng-options="sim for sim in sims" ></select>
    </div>
    <div class="suscriptor_fields" ng-if="simQuantity>=3">     
        <select name="sim" 
        ng-model="formData.sim[2]" 
        ng-options="sim for sim in sims" ></select>
    </div>
    <div class="suscriptor_fields" ng-if="simQuantity>=4">     
    <select name="sim" 
        ng-model="formData.sim[3]" 
        ng-options="sim for sim in sims" ></select>
    </div>
    {{formData.sim}}

If in the first select i choose 2 to 4 and select a value in the second to fourth select options and then i reselect the first one with a lower value, the ng-if turns to false but the ng-model doesnt change i need to get it to null again, so if doesnt get sent when i submit the form. In a nutshell, if a user selects 2, will get two options, if he/she selects two options but then changes his/her mind and decides only wants 1, the field disappears but the value is still getting send when submit. this is the fiddle jsfiddle.net/U3pVM/13524/

and the javascript part

function chip($scope) {
$scope.formData = {
    'sim' : {
        '0' : null,
        '1' : null,
        '2' : null, 
        '3' : null
    }
};
$scope.simQuantity = 1;
    $scope.simOptions = [1,2,3,4];
    $scope.sims = [
        'Mini-SIM',
        'Micro-SIM',
        'Nano-SIM',
    ];

}

Upvotes: 0

Views: 1886

Answers (1)

floribon
floribon

Reputation: 19193

You can clean the data during ng-change to remove the extra properties.

I have cleaned up your jsfiddle that was not working and implemented a solution:

http://jsfiddle.net/k1m3cd60/

code:

$scope.clean = function(n) {
  for (var i = 4; i >= +n; i--) {
     delete $scope.formData.sim[i];
  }
};

html:

ng-change="clean(simQuantity)"

Upvotes: 1

Related Questions