AngularJs过滤年龄和性别

最新推荐文章于 2021-03-31 19:35:48 发布

原创最新推荐文章于 2021-03-31 19:35:48 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#AngularJs

AngularJs、jQuery、JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的前端筛选器实现方案，该筛选器可以根据用户的年龄范围和性别进行数据过滤。通过使用AngularJS指令和作用域方法，实现了对用户数据的有效筛选。

性别排序、年龄排序

<select ng-model="ageSelect">
                        <option>--请选择年龄--</option>
                        <option>10-20</option>
                        <option>20-30</option>
                        <option>40-50</option>
                    </select>
                    <select ng-model="sexSelect" ng-click="sexs">
                        <option>--请选择性别--</option>
                        <option>男</option>
                        <option>女</option>
                    </select>

filter:ageFilter | filter:sexFilter

年龄和性别执行过滤的操作

$scope.ageSelect="--请选择年龄--";

                $scope.sexSelect="--请选择性别--";

                /*过滤年龄*/
                $scope.ageFilter = function(user){
                    if($scope.ageSelect!="--请选择年龄--"){
             //执行分割的操作
                        var arr = $scope.ageSelect.split("-");
                        var min=arr[0];
                        var max=arr[1];

                        if(min<user.age && user.age<max){
                            return true;
                        }else{
                            return false;
                        }
                    }else{
                        return true;
                    }
                };

                /*过滤性别*/
                $scope.sexFilter = function(user){
                    if($scope.sexSelect!="--请选择性别--"){
                        if($scope.sexSelect==user.sex){
                            return true;
                        }
                    }else{
                        return true;
                    }
                };