Ionic + Angular 无法默认检查离子无线电答案

【问题标题】：Ionic + Angular unable to ion-radio to be checked by defaultIonic + Angular 无法默认检查离子无线电
【发布时间】：2014-11-20 06:24:50
【问题描述】：

我正在尝试从单选列表中的单选按钮中检查一个，但没有运气。

谁能告诉我我做错了什么？

感谢您的帮助。

我尝试过这样做：

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

【问题讨论】：

标签： javascript angularjs radio-button

【解决方案1】：

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

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

我希望这会有所帮助。

【讨论】：

谢谢，但我不知道将什么传递给 $scope.data ？
将 $scope.data 中的 clientSide 值设置为您希望在单选按钮上选择的默认值。如果您不希望默认选择任何内容，请设置 clientSide = ''

【解决方案2】：

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

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

【讨论】：

请用英文回答，这样更容易理解。
感觉很独特，但 StackOverflow 是一个仅限英文的网站。请只用英语回答，即使您的英语不是那么好。人们总是可以编辑您的答案以改进任何可能不清楚的地方。如果你对西班牙语 StackOverflow 感兴趣，这里有一个建议：area51.stackexchange.com/proposals/42810/…

【解决方案3】：

就像@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;
            }
        }
    };

【讨论】：

【解决方案4】：

您也可以将 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>

在您的打字稿中：

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

【讨论】：