完成的事情：

完成任务8.。。

计划的事情：

明天看看关于html的任务9的内容

问题：

计划的完成任务8，时间还是很勉强

目的还是很明确的，主要针对搜索条件进行处理，既然需要angular，就是select标签使用ng-options属性，绑定预先建立的数组就能完成下拉框。

例如

<select id="type" ng-model="type" ng-options="x for (x,y) in select1"></select>

但是。。！没法使用$scope.type直接获取参数，只能继续百度，发现两个方法：

1、使用 js 或 jq 方法，获取对应 id 下的 value 值。

2、select标签内添加ng-change事件，穿参并返回

既然有任务要求，就使用下法，改成：

<select id="type" ng-model="type" ng-options="x for (x,y) in select1" ng-change="typeChange(type)"></select>

并如此获取当前值并穿回 $scope.type

$scope.typeChange = function(data){$scope.type=data}

完成参数获取后，接下来是数据筛选，angular有filter的方法，

例如添加filter的筛选方法

<li ng-repeat="x in listMes" | filter:myFilter1 | filter:myFilter2 | filter:myFilter3></li>

然后

$scope.myFilter1 = function(item){

    if($scope.type == null){return item;console.log('null')}

    else{return item.type == $scope.type;}

}

$scope.myFilter2 = function(item){

    if($scope.talent == null){return item}

    else{return item.talent == $scope.talent;}

}

$scope.myFilter3 = function(item){

    if($scope.level == null){return item}

    else{return item.level == $scope.level;}

}

即可完成筛选，（然后猜测，点击“搜索”，获取三个下拉框参数，重载一次 listMes 数据即可完成点击筛选事件）但是面临一个搜半天都没出来方法的问题：（只搜出了ng-if的方法判断是否为空）

在函数中使用 $scope.listMes.length 获取长度，其长度一直等于筛选前的数据长度，没法进行分页处理。

迫于无奈，上了js方法，建立一个筛选函数

function myFilter(item,str,num){

    var arr = [];

    if(num>=1){

        for(var i=0; i<item.length; i++){

            if(item[i][str] == num){

                arr.push(item[i]);

            }

        }

    }else{arr = item}

    return arr;

}

然后对数据进行三次筛选，得出目标值。

aSelect = myFilter(aMes,'type',$scope.type);

aSelect = myFilter(aSelect,'talent',$scope.talent);

aSelect = myFilter(aSelect,'level',$scope.level);

还有个对url上？后的参数读取使用，$location.search();即可。

为了当下拉框选择“全部”时候，？后显示为空，使{全部：null}。

而$location.search()得到的数据都是字符串，故页面加载的时候：

$scope.type = urlSearch.type >=1?parseInt(urlSearch.type):null;

$scope.talent = urlSearch.talent >=1?parseInt(urlSearch.talent):null;

$scope.level = urlSearch.level >=1?parseInt(urlSearch.level):null;

至此，基本功能完成

把数据筛选和分页封装在一个$scope函数内。

搜索事件：

1、清空url碎片（页面）

$location.hash('');

2、根据下拉框选项改写url传参

$location.search({"type":$scope.type,"talent":$scope.talent,"level":$scope.level});

3、再次筛选数据

搞定。

收获：

angular再深化，但还是菜鸟。