在AngularJS中，我们经常需要处理表单和输入控件。其中包括单选按钮（radio button），它们是一种常见的输入控件，允许用户从一组预定义的选项中选择一个。
但是，对于某些情况，我们需要在页面加载时根据模型来设置单选按钮的选中状态，这就需要使用AngularJS提供的指令来实现。
问题描述
假设我们有一个模型对象，其属性值为一组可选值。我们想要在页面加载时将相应的单选按钮设置为已选中状态。
例如，我们的模型对象如下：
-- -------------------- ---- ------- ------------ - - ------ ----- -- ------------- - - - ----- ------ ------ ----- -- - ----- -------- ------ ------- -- - ----- ------- ------ ------ - --
我们希望在页面加载时，"Red"单选按钮应该被选中。
解决方案
为了解决这个问题，我们可以使用AngularJS中的ng-checked指令。ng-checked指令用于动态设置单选按钮的选中状态。
首先，我们需要在HTML模板中添加单选按钮：
<div ng-repeat="color in colors">
<input type="radio" name="color" ng-model="model.color" ng-value="color.value" ng-checked="model.color == color.value">{{color.name}}
</div>在上面的代码中，我们使用ng-repeat指令来循环遍历颜色数组，并为每个颜色添加单选按钮。然后，我们使用ng-model指令将单选按钮绑定到模型属性（即$scope.model.color）。接下来，我们使用ng-value指令将单选按钮的值设置为当前颜色的值。
最重要的是，我们使用ng-checked指令来判断当前单选按钮是否应该处于选中状态。如果模型属性$scope.model.color与当前颜色的值相等，则该单选按钮应该处于选中状态。
这样，当AngularJS编译和执行这段代码时，它会根据当前模型对象的属性值来自动设置单选按钮的选中状态。
完整示例代码
-- -------------------- ---- -------
---- -----------------------
---- ---------------- -- --------
------ ------------ ------------ ---------------------- ---------------------- ----------------------- -- ---------------------------
------
------
--------
----------------------- ---
--------------------- ---------------- -
------------ - -
------ -----
--
------------- - -
- ----- ------ ------ ----- --
- ----- -------- ------ ------- --
- ----- ------- ------ ------ -
--
---
---------总结
在本文中，我们介绍了如何使用AngularJS的ng-checked指令来根据模型设置单选按钮的选中状态。我们还提供了一个完整的示例代码来演示如何实现。
虽然本文只涉及到单选按钮，但是这个技术同样适用于其他类型的输入控件，例如复选框和下拉列表框。理解、掌握并运用好这种技术，将能大大提高我们在AngularJS中处理表单和输入控件的效率和便利性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25395