独书先生 Menu

All items for 10月, 2017

AngularJS : 过滤器orderBy用法

API定义:通过expression来排序指定的array 。 字符串按字母顺序排序,数字按大小排序。注意:如果你发现数字没被正确排序,请确认它们保存的是数字而不是字符串。

实现:在表格中,点击表头可使下边的数据按顺序排列,多次点击切换正倒排序

AngularJS_orderBy

AngularJS_orderBy

代码:

HTML:

<!--过滤器orderBy的用法-->
<table>
    <tr>
        <th><a href="javascript:void(0)" ng-click="orderField='name';reverse=!reverse;">姓名</a></th>
        <th><a href="javascript:void(0)" ng-click="orderField='phone';reverse=!reverse;">电话</a></th>
    </tr>

    <!--使用ng-repeat指令渲染所有的朋友数据-->
    <tr ng-repeat="friend in friends|orderBy:orderField:reverse">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
    </tr>
</table>

 

JS:

//声明filterCpntroller
cart.controller('filterController',function ($scope) {

    //声明一个数组用于演示过滤器filter的用法
    $scope.friends = [
        {name:'John',phone:'333-2332'},
        {name:'Alex',phone:'255-2332'},
        {name:'Elaine',phone:'333-4556'},
        {name:'Sam',phone:'111-2332'},
        {name:'Peter',phone:'333-0987'},
        {name:'Adam',phone:'5442-2467'},

    ];

    //排序字段定义:可能选项是'name','phone'
    $scope.orderField = 'name';

    //正序或倒序
    $scope.reverse = true;
});

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>