angular-年龄查询

最新推荐文章于 2020-07-18 07:29:58 发布

最新推荐文章于 2020-07-18 07:29:58 发布 · 446 阅读

本文介绍了一个基于AngularJS的应用场景，通过自定义一个年龄测试函数来筛选表格中显示的用户记录。该函数根据用户选择的年龄段来决定哪些用户的年龄符合要求，并允许展示。此外，还包括了基本的表格排序功能。

$scope.ageTest = function (age, ageSize) {
    if (ageSize != "--请选择--") {
        var agess = ageSize.split("-");
        var ageMin = agess[0];
        var ageMax = agess[1];
        if (age < ageMin || age > ageMax) {
            return false;
        } else {
            return true;
        }
    } else {
        return true;
    }
}
//html代码
<select id="age" ng-model="ageSize" ng-init="ageSize='--请选择--'">
    <option>--请选择--</option>
    <option>11-20</option>
    <option>21-30</option>
    <option>31-40</option>
    <option>41-50</option>
    <option>51-60</option>
</select>
<tr>
    <td><input type="checkbox" ng-click="checkAll()" ng-model="chec"></td>
    <th align="left"  ng-click="dian('id')">id</th>
    <th  ng-click="dian('name')">用户名</th>
    <th  ng-click="dian('password')">密码</th>
    <th  ng-click="dian('age')">年龄</th>
    <th  ng-click="dian('sex')">性别</th>
    <th>操作</th>
</tr>
    <tr ng-repeat="x in shuzu|filter:{'Name':search}" ng-if="ageTest(x.age,ageSize)">
        <td><input type="checkbox" ng-model="x.done" ng-click="counts()"></td>
        <td>{{x.id}}</td>
        <td>{{x.Name}}</td>
        <td>{{x.password}}</td>
        <td>{{x.age}}</td>
        <td>{{x.sex}}</td>
        <td>
            <button ng-click="editUser($index)">修改密码</button>
        </td>
    </tr>