angularjs中checkbox用法
时间: 2024-10-10 15:07:50 浏览: 17
在AngularJS中,Checkbox是一种常用的表单元素,用于让用户选择是否同意某个条件或选项。以下是AngularJS中Checkbox的基本用法:
1. **HTML结构**:
```html
<form ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model="isChecked"> Check me!</br>
{{ isChecked ? 'Checked' : 'Unchecked' }}
</form>
```
这里`ng-model`绑定到控制器中的一个变量`isChecked`,用户勾选或取消勾选时,该值会在控制器里同步变化。
2. **Controller**:
```javascript
angular.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.isChecked = false; // 初始化状态
});
```
在这个例子中,如果`isChecked`为`true`,则显示"Checked",否则显示"Unchecked"。
3. **双向数据绑定**:
Angular的`ngModel`指令实现了双向数据绑定,即输入框的值改变会自动更新模型,反之亦然。
阅读全文