无法在用户界面中选择单选按钮

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>