javascript Ionic + Angular 无法默认检查 ion-radio

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

提问by George Smith

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:

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);
        };

回答by Eliut Islas

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

data.clientSide 的值似乎不在列表goalTypeList 中。更改值以匹配任何..

html:

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:

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);
    };

回答by Marc Harry

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

your$scope.data = { clientSide: 'ng' };中的值与 中的任何值都不匹配$scope.goalTypeList。

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

如果 clientSide 值$scope.data是拨号、对话、约会或订单，则单选按钮应加载选择的单选按钮之一。

I hope this helps.

我希望这有帮助。

回答by khashashin

Like @Marc Harry said your ng-valueshould 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:

就像@Marc Harry 说你ng-value应该是平等的ng-model。为了使其更具动态性（假设您从后端获取一个对象并且所选值可能会更改），您可以执行以下操作：

<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;
            }
        }
    };

回答by Othmane Daanouni

you can use ion-select also with ionChange event:

您也可以将 ion-select 与 ionChange 事件一起使用：

 <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)}