Question

我正在创建一个html / angularjs表单。在形式我有一个是或否的单选按钮。所以我想默认检查按钮号这是我使用的代码：我的控制器：

angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.myvariable = 'false';

    }]);

我的html代码段：

<div class="col-lg-10">
                <input type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes</input> 
                <input type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No</input>
            </div>

但是第一次加载表单时没有选择（选中）。我必须单击一个值才能选择一个（选中）我的代码出了什么问题？这里plunker link 感谢

Answer 1

我为你做了fiddle。查看HERE

您还应该设置ng-value，true或false

<div ng-controller="MyCtrl">
    <div ng-repeat="o in options">
        <input type="radio" name="group1" ng-model="o.checked" ng-value="o.checked"></input>
        <label>{{o.name}}</label>
    </div>
</div>



var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.options =  [
       { name: 'OPT1', id: 1, checked: false },
       { name: 'OPT2',id: 2, checked: false },
       { name: 'OPT3',id: 3, checked: true  }
    ];
   }

Answer 2

它在plunkr中不起作用的原因是因为你创建了一个名为＆＃34; radioExample＆＃34;但是在编写HTML代码时你不会使用它。

基本上，替换这个 -

<html ng-app>

在代码的开头用这个

<html ng-app="radioExample">

这样，当您声明控制器时，AngularJS知道需要查看哪个模块来获取控制器。

注意 - 如果您没有将控制器与模块相关联，那么您的代码将起作用。

Answer 3

结帐ng-checked。您要做的是将ng-app="radioExample"添加到您的应用的html - 标记。

然后在以下plunker示例中添加ng-checked="myvariable == 'false'"和ng-value="'value'"： Plunker

<div class="col-lg-10">
    <input ng-checked="myvariable == 'true'" type="radio" id="variable" name="variable" ng-model="myvariable" value="true">Yes
    <input ng-checked="myvariable == 'false'" type="radio" id="variable" name="variable" ng-model="myvariable" value="false">No
</div>

Answer 4

数据绑定错误。在radiobutton中定义控制器覆盖值中的myvariable。您必须使用ng-repeat，如

<div ng-repeat="o in options">
    <input type="radio" name="name" ng-model="o.checked" ng-value="o.checked"></input>
    <label>{{o.name}}</label>
</div>

（我使用上一个答案的代码）

如何用angularJS检查单选按钮？

4 个答案: