javascript - 单选按钮无法在 UI 中选择

Question

我正在尝试选择单选按钮，但不知何故它们没有出现在 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>

有人能告诉我如何解决吗？

Answer 1

为您创建了代码片段。您在代码中遗漏了 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>