AngularJS入门教程之ng-checked 指令详解

AngularJS ng-checked指令详解与应用示例

你是否在使用AngularJS时遇到过需要使用ng-checked指令的情况？本文将为你详细讲解ng-checked指令的基础知识，并通过代码实例进行演示，让你轻松掌握这一指令的用法。

一、什么是ng-checked指令？

ng-checked是AngularJS中的一个指令，用于设置复选框（checkbox）或单选按钮（radio）的checked属性。当ng-checked属性返回true时，对应的复选框或单选按钮会被选中。

二、如何使用ng-checked指令？

在HTML中，你可以将ng-checked指令添加到元素上，类型（type）为checkbox或radio。语法如下：

其中，expression是一个表达式，用于计算并返回一个布尔值。当表达式返回true时，复选框或单选按钮会被选中。

三、实例演示

下面是一个简单的AngularJS示例，演示了如何使用ng-checked指令：

1. 创建一个HTML文件，引入AngularJS库。

2. 在body中添加一个复选框和一个单选按钮组。

3. 使用ng-model指令为复选框绑定一个变量（例如all），用于控制所有复选框和单选按钮的选中状态。

4. 使用ng-checked指令将复选框和单选按钮的选中状态与all变量关联。

示例代码如下：