Angular.js:如何在负载上选择“无线电”按钮

Question

这是我控制器的范围。我希望在负载上选择第一个单选按钮我已经尝试了ng-selected =" true"和ng-selected = {{true}}，但这不起作用

    <div ng-controller="MyController as myCtrl">
        <div ng-class='myCtrl.themeSelected.bodyClass' class='text-div'>
            <!-- radio buttons -->
            <div class='radio-wrap'>
                <input type="radio" name="theme" ng-value="myCtrl.defaultTheme" ng-model="myCtrl.themeSelected" ng-selected="true"> Default
                <input type="radio" name="theme" ng-value="myCtrl.yellowTheme" ng-model="myCtrl.themeSelected"> Yellow
                <input type="radio" name="theme" ng-value="myCtrl.greenTheme" ng-model="myCtrl.themeSelected"> Green
                <input type="radio" name="theme" ng-value="myCtrl.redTheme" ng-model="myCtrl.themeSelected"> Red
                <input type="radio" name="theme" ng-value="myCtrl.blueTheme" ng-model="myCtrl.themeSelected"> Blue
            </div>
        </div>
    </div>

这也是我的控制器函数，也是默认单元按钮：

myModule.controller('MyController', function(){
this.defaultTheme = {
    bodyClass: false,
    firstDivClass:"grayBackground",
    secondDivClass:"lightGrayBackground"
};
});

Answer 1

您需要在控制器中设置this.themeSelected，以等于要选择的单个单选按钮的值。因此，在您的情况下，this.themeSelected = this.defaultTheme应预选第一个单选按钮。不需要ng-selected指令，因为它是确定所选状态的模型。

示例plunkr

Answer 2

您阅读了角文档吗？

角文档（输入[无线电]）

您可以这样做，如果您在此示例中插入ng-value，那么您需要使用适当的数据创建对象。但这取决于您的需求。但是我想您想获得下面的示例

var myApp = angular.module('myApp',[]);
myApp.controller('MyController', function($scope){
$scope.defaultTheme = {
    bodyClass: false,
    firstDivClass:"grayBackground",
    secondDivClass:"lightGrayBackground"
};
$scope.themeSelected = 'yellowTheme'
});

.defaultTheme {
  background-color: white;
}
.yellowTheme {
  background-color: yellow;
}
.greenTheme {
  background-color: green;
}
.redTheme {
  background-color: red;
}
.blueTheme {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyController">
        <div ng-class='themeSelected' class='text-div'>
            <!-- radio buttons -->
            <div class='radio-wrap'>
                <input type="radio" name="theme" value="defaultTheme" ng-model="themeSelected"> Default
                <input type="radio" name="theme" value="yellowTheme" ng-model="themeSelected"> Yellow
                <input type="radio" name="theme" value="greenTheme" ng-model="themeSelected"> Green
                <input type="radio" name="theme" value="redTheme" ng-model="themeSelected"> Red
                <input type="radio" name="theme" value="blueTheme" ng-model="themeSelected"> Blue
            </div>
        </div>
      <p>{{themeSelected}}</p>
    </div>
</div>