1

miaomiao/www/js/controllers/home.js

@@ -19,6 +19,7 @@
         $scope.toggleLeftSideMenu = function () {
             $ionicSideMenuDelegate.toggleLeft();
         };
+
         $scope.doFilter = function () {
             $ionicSideMenuDelegate.toggleRight();
         };
@@ -39,10 +40,76 @@
         $scope.toUserDetail = function (id) {
             $state.go('app.home_userDetail',{id:id});
         };
+        $scope.changeFilter = function (input) {
+            switch (input) {
+                case '1':
+                    if ($scope.filter.sex == 1) {
+                        $scope.filter.sex = 0;
+                    } else {
+                        $scope.filter.sex = 1;
+                    }
+                    break;
+                case '2':
+                    if ($scope.filter.sex == 2) {
+                        $scope.filter.sex = 0;
+                    } else {
+                        $scope.filter.sex = 2;
+                    }
+                    break;
+                case '18-21':
+                    if ($scope.filter.age == 1) {
+                        $scope.filter.age = 0;
+                    } else {
+                        $scope.filter.age = 1;
+                    }
+                    break;
+                case '22-25':
+                    if ($scope.filter.age == 2) {
+                        $scope.filter.age = 0;
+                    } else {
+                        $scope.filter.age = 2;
+                    }
+                    break;
+                case '26-29':
+                    if ($scope.filter.age == 3) {
+                        $scope.filter.age = 0;
+                    } else {
+                        $scope.filter.age = 3;
+                    }
+                    break;
+                case '30-33':
+                    if ($scope.filter.age == 4) {
+                        $scope.filter.age = 0;
+                    } else {
+                        $scope.filter.age = 4;
+                    }
+                    break;
+                case '34-37':
+                    if ($scope.filter.age == 5) {
+                        $scope.filter.age = 0;
+                    } else {
+                        $scope.filter.age = 5;
+                    }
+                    break;
+                case '>38':
+                    if ($scope.filter.age == 6) {
+                        $scope.filter.age = 0;
+                    } else {
+                        $scope.filter.age = 6;
+                    }
+                    break;
+                default:
+
+            }
+              
+        }
         $scope.filter = {
             hasMore: false,
             pageIndex: 1,
-            pageSize: 20
+            pageSize: 20,
+            sex: 0,//1男,2女,0:全部,
+            age: 0,//0:全部,1:18-21,2:22-25,3:26-29,4:30-33,5:34-37,6:>38,
+            city:''
         };
         $scope.index = {
             banner: [],

miaomiao/www/templates/home/index.html

@@ -101,7 +101,7 @@
                     <ion-item>
                         筛选
 <div class="list">
-    <label class="item item-select item-select-width">
+    <!--<label class="item item-select item-select-width">
      <span class="input-label">
          性别
      </span>
@@ -110,10 +110,59 @@
          <option value="0" selected>男</option>
          <option value="1">女</option>
      </select>
-    </label>
+    </label>-->
+   <div class="item">
+       <button class="button button-stable {{filter.sex==1?'button-calm':''}}" ng-click="changeFilter('1')" style="min-width:3rem">
+           男
+       </button>
+       <button class="button button-stable {{filter.sex==2?'button-calm':''}}" ng-click="changeFilter('2')" style="min-width:3rem">
+           女
+       </button>
+   </div>
+   <div class="item">
+       <p>年龄</p>
+       <div class="row">
+           <div class="col">
+               <button class="button button-stable {{filter.age==1?'button-calm':''}}" ng-click="changeFilter('18-21')"  style="min-width:3rem">
+                   18-21
+               </button>
+           </div>
+           <div class="col">
+               <button class="button button-stable {{filter.age==2?'button-calm':''}}" ng-click="changeFilter('22-25')" style="min-width:3rem">
+                   22-25
+               </button>
+           </div>
+          
+       </div>
+       <div class="row">
+           <div class="col">
+               <button class="button button-stable {{filter.age==3?'button-calm':''}}" ng-click="changeFilter('26-29')" style="min-width:3rem">
+                   26-29
+               </button>
+           </div>
+           <div class="col">
+               <button class="button button-stable  {{filter.age==4?'button-calm':''}}" ng-click="changeFilter('30-33')" style="min-width:3rem">
+                   30-33
+               </button>
+           </div> 
+          
+       </div>
+       <div class="row">
+           <div class="col">
+               <button class="button button-stable {{filter.age==5?'button-calm':''}}" ng-click="changeFilter('34-37')" style="min-width:3rem">
+                   34-37
+               </button>
+           </div>
+           <div class="col">
+               <button class="button button-stable  {{filter.age==6?'button-calm':''}}" ng-click="changeFilter('>38')" style="min-width:3rem">
+                   >38
+               </button>
+           </div> 
+       </div>       
+   </div>
   <label class="item item-select item-select-width">
-    <span class="input-label">城市</span>
-    <select name="city" ng-model="vm.city">
+    <span class="input-label">地区</span>
+    <select name="city" ng-model="filter.city">
         <option value="" selected>所有</option>
         <option value="北京">北京</option>
         <option value="上海">上海</option>