CODEWITHSUNDEEP
javascriptangularjs
user3821280
user3821280

Reputation: 39

How to properly contrl radio and select values using angular

I'm trying to set values of radio and select elements on the load of the page, if the current URL contains type and annee params, then I set those params as values of the radio and the select else if this does not, I set them to 1 and 2014 respectively.

I'm using this code to deal with this:

html

<span class="form-group" ng-controller="FiltreFicheController as ffCtl">
    <input type="radio" name="type" ng-model="type" value="1" style="margin-left:10px;" ng-change="ffCtl.checkRadio(1)" ng-checked="ffCtl.isChecked(1)"> Tout
    <input type="radio" name="type" ng-model="type" value="4" ng-change="ffCtl.checkRadio(4)" ng-checked="ffCtl.isChecked(4)"> 4 mois
    <input type="radio" name="type" ng-model="type" value="6" ng-change="ffCtl.checkRadio(6)" ng-checked="ffCtl.isChecked(6)"> 6 mois
    <input type="radio" name="type" ng-model="type" value="8" ng-change="ffCtl.checkRadio(8)" ng-checked="ffCtl.isChecked(8)"> 8 mois
    <input type="radio" name="type" ng-model="type" value="12" ng-change="ffCtl.checkRadio(12)" ng-checked="ffCtl.isChecked(12)"> 12 mois
    <select name="annee" ng-model="annee">
        <option value="2014" ng-selected="ffCtrl.isSelected(2014)">2014</option>
        <option value="2000" ng-selected="ffCtrl.isSelected(2000)">2000</option>
    </select>
</span>

js

app.controller('FiltreFicheController', function($scope, $location){
        var link = document.URL;
        var type_param = (!location.search.indexOf('?', link)?location.search.split('type=')[1].split('&')[0]:'undefined');
        var annee_param = (!location.search.indexOf('?', link)?location.search.split('annee=')[1]:'undefined');
        this.type = (type_param!=='undefined'?type_param:1);
        this.annee = (annee_param!=='undefined'?annee_param:2014);

        this.isChecked = function(numRadio){
            return this.type === numRadio;
        }

        this.isSelected = function(annee){
            alert(link);
            return this.select === annee;
        }

        this.checkRadio = function(numRadio){
            this.type = numRadio;
            window.location.href = link.substring(link.indexOf('/'),link.lastIndexOf('/')) + '/fiche?type=' + numRadio + '&annee=' + this.annee;
        }
    });

But this wouldn't work. It works only when there are no params set into the URL and only sets the type radio to 1.

How do I fix this, please?

Thanks a lot!

Upvotes: 0

Views: 52

Answers (2)

maurycy
maurycy

Reputation: 8465

check my plunker with working code and a bit different approach, i've removed all the ng-change to make it cleaner

http://plnkr.co/edit/w61cKtp1eNnL31EL5GPR?p=preview

<input type="radio" name="type" ng-model="type" value="1" style="margin-left:10px;" > Tout
<input type="radio" name="type" ng-model="type" value="4" > 4 mois
<input type="radio" name="type" ng-model="type" value="6" > 6 mois
<input type="radio" name="type" ng-model="type" value="8" > 8 mois
<input type="radio" name="type" ng-model="type" value="12" > 12 mois

Upvotes: 0

Florian Gl
Florian Gl

Reputation: 6014

I think your problem is that type_param and thus this.type are of type string, but your numRadio argument is of type int. so it checks f.e. 2 === "2" which is false.

So you can do this.type = (type_param!=='undefined'?parseInt(type_param):1);

Upvotes: 1

Related Questions