Question

我有以下单选按钮列表，无法启用配音：

<ion-list>
    <label class="item item-radio" 
           ng-repeat="type in someCtrl.types"  
           aria-label="{{type.label}}" 
           id="{{type.value}}">
        <input type="radio" 
               role="radio" 
               ng-model="someCtrl.data.type" 
               ng-value="type.value" 
               aria-labelledby="{{type.value}}">
        <div class="radio-content">
            <div class="item-content">{{type.label}}</div>
        <i class="radio-icon ion-checkmark"></i>
        </div>
    </label>
</ion-list>

当我启用画外音并从列表中选择一个项目时，该项目会收到一个复选标记，但模型不会更改，所选的默认项目仍会保留其复选标记。当用户继续从列表中选择项目时，它们每个都会获得一个复选标记，但数据模型不会更改，并且所有选中标记都会保留。有没有人有幸使用配音的离子无线电列表？

Answer 1

步骤1：在控制器中首先初始化您要选择的项目列表
对于Ex：

$scope.audio_types = [
    {name: $translate.instant("Morning"), value : 'Morning'},
    {name: $translate.instant("Afternoon"), value : 'Afternoon'},
    {name: $translate.instant("Evening"), value : 'Evening'}
  ];

步骤2：您正在使用ng-model，因此使用空属性初始化对象

对于Ex：$scope.profile = {};

步骤3：您正在使用单选按钮选择项目属性，因此声明方法以检查属性是否正在发生变化

$scope.roundCountChange = function(){
console.log($scope.profile.dropdown);
}

Step4：HTML页面的最后一步添加这些代码

<label class="item"> "select"  <br/>
  <label ng-repeat="item in audio_types">
    <input type="radio" ng-model="profile.dropdown" ng-value="item.value" ng-change="roundCountChange()"/> item.name
  </label>
</label>

为配音屏幕阅读器实现离子无线电按钮的正确方法是什么？

1 个答案: