Question

我正在通过API调用创建一个列表。我需要选择该列表中的第一个单选按钮。如果存在列表中只有一个项目的情况，我希望自动选择该项目，然后将其定向到下一页面。以下代码只能直观地选择单选按钮 - 除非单击该值，否则不会反映该值。

 <tbody>
                    <tr ng-repeat="i in app | filter:searchApp">
                        <td class="text-center">
                            <input type="radio" ng-model="$parent.currentApp" id={{i.name}} value="{{i.id}}"
                                   ng-click="getVal(i)" name="radio" ng-checked="$first">
                            <label class="ui-radio" for={{i.name}}></label>
                        </td>
                        <td>{{i.name}}</td>
                        <td>{{i.description}}</td>
                    </tr>
                    </tbody>

$(function() {
            var $radios = $('input:radio[name=radio]');
            if($radios.is(':checked') === false) {
                $radios.filter('[value=i.id]').prop('checked', true);
                $rootScope.app= i.id;
                console.log($rootScope.app);
            }
            console.log($radios);
        });

我在这个JQuery中遇到错误，因为它无法识别value = i.id。请帮我在页面加载时选择单选按钮，以便选择该值（不仅仅是目视检查）。解决方案可以是AngularJS或Jquery。

感谢您的帮助。

Answer 1

使用纯棱角可以达到理想的效果。这是我创建的工作DEMO。

要点：创建模型$scope.selectedListItem = null; 当您从服务器获取数据时（在我的情况下，$ scope.apiDataList是数据），执行此操作以选择第一个单选按钮：

//for multiple elements/options
$scope.apiDataList = [{id:1,name:"male"},{id:2,name:"female"}];

//now when you have got the data, select the first element
$scope.selectedListItem = $scope.apiDataList[0];

现在您已经选择了第一个单选按钮的实际值，我们现在想要以可视方式显示它。在代码中使用类似的东西，如下所示：

<input type="radio" ng-model="selectedListItem" id={{item.name}} value="{{item.id}}"
                     ng-click="selectRadioButton(item)" name="radio" ng-checked="selectedListItem==item">

请注意ng-checked="selectedListItem==item"代码段。如果当前单选按钮是所选单选按钮，那就是用标志性地检查单选按钮的标记。如果您稍后需要使用所选列表项/单选按钮的值，请使用$scope.selectedListItem。

希望这有帮助

AngularJS Radiobutton在页面加载时选择

1 个答案: