无法在UI中选择单选按钮

radio buttons unable to select in UI

本文关键字：选择 单选按钮 UI      更新时间：2023-09-26

我试图选择单选按钮，但不知何故他们没有显示在UI侧。我已经验证了按钮可以按下，因为它在点击时调用函数，但UI不显示任何选择。

<div data-ng-repeat="flagInfo in availableList">
    <input type="radio" name="flag" id="{{flagInfo.flagName}}" value="{{flagInfo.flagName}}" data-ng-click="selection(flagInfo.flagName)" />
    <span class="checkbox-label">
        <label for="{{flagInfo.flagName}}">{{flagInfo.translation}}</label>
    </span>
</div>
谁能告诉我怎么解决这个问题?

为您创建代码片段。您的代码中缺少ng-model。

function myCtrl($scope) {
$scope.radioList={
'flagName':'abc'
}
    $scope.availableList =  [{
        'flagName':'abc',
        'id':1
    },{
        'flagName':'def',
        'id':2
    },{
        'flagName':'ghi',
        'id':3
    },{
        'flagName':'jkl',
        'id':4
    }];
  $scope.radioChange=function(radval){
    console.log(radval);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
    <div data-ng-repeat="flagInfo in availableList">
    <input type="radio" name="flag" id="{{flagInfo.flagName}}" value="{{flagInfo.flagName}}"  ng-model="radioList.flagName" ng-change="radioChange(radioList.flagName)" />
    <span class="checkbox-label">
        <label for="{{flagInfo.flagName}}">{{flagInfo.flagName}}</label>
    </span>
  </div>
  <div>
  Selected Radio : {{radioList.flagName}}
  </div>
</div>

相关文章：