独书先生 Menu

AngularJS : ng-model数据绑定之全选

实现:

全选需求,点击全选checkbox下面的复选框全部被选中

数据绑定全选

数据绑定全选

分析:

全选部分使用双向数据绑定ng-model, 下面每个复选框使用单向数据绑定(view->model)ng-checked

代码:

<table>
    <tr>
        <td>全选 <input type="checkbox" ng-model="allChecked"></td>
        <td>姓名</td>
    </tr>
    <tr>
        <td><input type="checkbox" ng-checked="allChecked"></td>
        <td>张三</td>
    </tr>
    <tr>
        <td><input type="checkbox" ng-checked="allChecked"></td>
        <td>李四</td>
    </tr>
    <tr>
        <td><input type="checkbox" ng-checked="allChecked"></td>
        <td>王五</td>
    </tr>
</table>