如何设置带值的默认单选按钮?

时间:2016-06-30 00:28:27

标签: javascript html angularjs

一般问题:我无法在我的电台组中设置默认单选按钮,除非我从输入中删除了value属性。

细节:每个输入都有一个值,因为它在应用程序的其他位置由angular使用。因此,我需要知道如何在保留输入值的同时将输入设置为默认值。如果我尝试使用jQuery而不是HTML添加check,它会有相同的行为。

我查看过几个相关问题,包括here。具体问题是我需要有值并且能够将一个输入设置为默认选中。第一个输入设置为选中,但除非我从该输入中删除值,否则它实际上不起作用。

以下是HTML:

<div class="radio">
   <label>
        <input type="radio" ng-model="optionsRadios" id="new" value="new" checked>
        New
   </label>

   <label>
        <input type="radio" ng-model="optionsRadios" id="used" value="used">
        Used
   </label>

   <label >
         <input type="radio" ng-model="optionsRadios" id="broken" value="broken">
         Broken
   </label>
</div>

2 个答案:

答案 0 :(得分:2)

您必须使用ng-checked="true"代替checked

<input type="radio" ng-model="optionsRadios" id="new" value="new" ng-checked="true">

&#13;
&#13;
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>My cars:</p>
<input type="radio" ng-model="all" value="Volvo" ng-checked="true">Volvo<br>
<input type="radio" ng-model="all" value="Ford">Ford<br>
<input type="radio" ng-model="all" value="Mercedes">Mercedes
</body>
</html>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

如果您有一组单选按钮,并且您想根据型号设置单选按钮,则单选按钮具有相同的功能 值和ng模型会自动检查。

<input type="radio"
ng-model="optionsRadio" value="1" >
<input type="radio"
ng-model="optionsRadio" value="2" >
<input type="radio"
ng-model="optionsRadio" value="3" >

如果optionsRadio的值是&#34; 2&#34;然后将自动选择第二个单选按钮。

在你的情况下: 当您启动控制器时,您所要做的就是为您的模型分配一个值,以便至少选择一个单选按钮。

控制器部分:

$scope.optionsRadio = "new";

表单部分:

<input type="radio" ng-model="optionsRadio" value="new" >
<input type="radio" ng-model="optionsRadio" value="used" >
<input type="radio" ng-model="optionsRadio" value="broken" >

将自动选择第一个单选按钮。

注意: 如果价值不起作用,您可以使用ng-value