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

Posted 2023-03-05

【中文标题】Ionic + Angular 无法默认检查离子无线电

【英文标题】：Ionic + Angular unable to ion-radio to be checked by default

【发布时间】：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);
        ;

【参考方案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);
    ;

【讨论】：

请用英文回答，这样更容易理解。

感觉很独特，但 *** 是一个仅限英文的网站。请只用英语回答，即使您的英语不是那么好。人们总是可以编辑您的答案以改进任何可能不清楚的地方。如果你对西班牙语 *** 感兴趣，这里有一个建议：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)