如何使用中间选项使检查属性工作?

时间:2016-11-10 06:03:43

标签: html angularjs

我有一套日,月和年的单选按钮。

<label>
   <input type="radio" ng-model="IsDays" name="timeunit" > Period in days
   <input type="radio" ng-model="IsMonths" ng-checked="true" name="timeunit"> Period in months
   <input type="radio" ng-model="IsYears" name="timeunit" > Period in years
</label>


我已经读过,尽管将checked属性放在中间选项中,将检查组中的最后一个按钮,如果单选按钮具有相同的名称属性值

我尝试了已检查 ng-checked =“true”情景。

是否有一种简单的方法可以覆盖此行为并允许默认情况下检查中间选项()?

更新:解决了我自己的问题。请参阅下面的答案。

2 个答案:

答案 0 :(得分:1)

发布答案以供将来参考:

只有在默认情况下需要检查最后一个单选按钮选项时,

选中才会起作用。

我们需要给 checked =&#34;检查&#34; ,以便为中间选项工作。只是已检查在这种情况下无法工作。

<label>
 <input type="radio" ng-model="IsDays" name="timeunit" > Period in days
 <input type="radio" ng-model="IsMonths" checked="checked" name="timeunit"> Period in months
 <input type="radio" ng-model="IsYears" name="timeunit" > Period in years

奇怪:)

更新:清除浏览器Cookie后,即使这样做也无效。在查看一些AngularJS文档后,我得到了以下解决方案。

        <label>
            <input type="radio" ng-model="timeunit" value="days">
            Period in days
        </label><br />
        <label>
            <input type="radio" ng-model="timeunit" value="months">
            Period in months
        </label><br />
        <label>
            <input type="radio" ng-model="timeunit" value="years">
            Period in years
        </label><br />

我们必须为所有三个单选按钮的 ng-model 设置相同的值,而不是设置相同的名称属性,以使它们作为一个组运行。

要设置默认值,我们可以在js文件中设置它,如下所示

 function ($scope) {

    $scope.timeunit = "months"; //Default set to months

  //Other code
 }

答案 1 :(得分:0)

您可以使用ngInit来完成此操作 像:

<input type="radio" ng-model="IsMonths" ng-init="checked=true" name="timeunit"> Period in months