CODEWITHSUNDEEP
javascriptangularjsradio-button
George Smith
George Smith

Reputation: 143

Ionic + Angular unable to ion-radio to be checked by default

I'm trying to check one from radio buttons in radio list, but without luck.

Could somebody tell me what i'm doing wrong?

Thanks for any help.

I tried to do it by this way:

<div class="list">

      <ion-radio ng-repeat="item in goalTypeList"
                 ng-value="item.value"
                 ng-change="goalTypeChanged(item)"
                 ng-checked="item.selected"
                 ng-model="data.clientSide">
          {{ item.text }}
      </ion-radio>

  </div>

JS:

.controller('SettingsCtrl', function($scope, $ionicLoading) {

        $scope.goalTypeList = [
            { text: "Dials", value: "dials", selected: true },
            { text: "Conversations", value: "conversations" , selected: false  },
            { text: "Appointments", value: "appointments" , selected: false },
            { text: "Orders", value: "orders", selected: false  }
        ];

        $scope.data = {
            clientSide: 'ng'
        };

        $scope.goalTypeChanged = function(item) {
            console.log("Selected goalType, text:", item.text, "value:", item.value);
        };

Upvotes: 5

Views: 12745

Answers (4)

Othmane Daanouni
Othmane Daanouni

Reputation: 151

you can use ion-select also with ionChange event:

 <ion-select (ionChange)="checkValue($event)"  interface="popover" 
  placeholder="Select One" >
    <ion-select-option *ngFor="let item of userData" [value]="item"> 
   {{item.optionA}}</ion-select-option>
</ion-select>

In your typeScript:

checkValue(event){ console.log(event.detail.value)}

Upvotes: 0

khashashin
khashashin

Reputation: 1137

Like @Marc Harry said your ng-value should be equal ng-model. To make it more dynamic (let's say you get an object from the backend and the selected value may change) you could do following:

<div class="list">

      <ion-radio ng-repeat="item in goalTypeList"
                 ng-value="item.value"
                 ng-checked="item.selected"
                 ng-model="data.clientSide">
          {{ item.text }}
      </ion-radio>

</div> 

.controller('SettingsCtrl', function($scope, $ionicLoading) {

    $scope.goalTypeList = [
        { text: "Dials", value: "dials", selected: true },
        { text: "Conversations", value: "conversations" , selected: false  },
        { text: "Appointments", value: "appointments" , selected: false },
        { text: "Orders", value: "orders", selected: false  }
    ];

    $scope.data = {
        clientSide: selectedValue()
    };

    function selectedValue = function() {
        for(let i = 0; i < $scope.goalTypeList.length; i++) {
            if ($scope.goalTypeList[i].selected) {
                return $scope.goalTypeList[i].value;
            }
        }
    };

Upvotes: 0

Eliut Islas
Eliut Islas

Reputation: 618

It seems that the value of data.clientSide is not in the list goalTypeList. Change the value to match any..

html:

<div class="list">

  <ion-radio ng-repeat="item in goalTypeList"
             ng-value="item.value"
             ng-change="goalTypeChanged(item)"
             ng-checked="item.selected"
             ng-model="data.clientSide">
      {{ item.text }}
  </ion-radio>

js:

  .controller('SettingsCtrl', function($scope, $ionicLoading) {

    $scope.goalTypeList = [
        { text: "Dials", value: "dials", selected: true },
        { text: "Conversations", value: "conversations" , selected: false  },
        { text: "Appointments", value: "appointments" , selected: false },
        { text: "Orders", value: "orders", selected: false  }
    ];

    $scope.data = {
        clientSide: 'appointments'
    };

    $scope.goalTypeChanged = function(item) {
        console.log("Selected goalType, text:", item.text, "value:", item.value);
    };

Upvotes: 2

Marc Harry
Marc Harry

Reputation: 2430

The value in your $scope.data = { clientSide: 'ng' }; doesn't match any of the values in $scope.goalTypeList.

If the clientSide value on $scope.data was either dials, conversations, appointments or orders then the radio buttons should then load with one of the radio buttons selected.

I hope this helps.

Upvotes: 1

Related Questions