首页手记 AngularJS | filter: {筛选条件}...

AngularJS | filter: {筛选条件} 按分类（门票类型）显示对应数据（门票）

标签：

AngularJS

从后台接口获取的列表信息中，按需要分类筛选显示

json 数据 data.json

{
  "code": 1,
  "msg": "成功",
  "data": {
    "list": [
      {
        "titile": "欢乐谷特惠门票",
        "price": 45.0,
        "type": "成人票",
        "id": 3
      }, {
        "titile": "欢乐谷夜场票",
        "price": 45.0,
        "type": "夜场票",
        "id": 2
      }, {
        "titile": "欢乐谷特惠儿童票",
        "price": 45.0,
        "type": "儿童票",
        "id": 1
      }, {
        "titile": "欢乐谷日场票",
        "price": 45.0,
        "type": "日场票",
        "id": 4
      }
    ],
    "business_name": "成都欢乐谷"
  }
}

HTNL页面代码 list.html

<html ng-app="MyApp">
    ...
<div ng-controller="listCtrl">
    <div>
            <a ng-click="showType('')">全部分类</a>
            <a ng-click="showType(item.type)" ng-repeat="item in listData" ng-bind="item.type"></a>
    </div>
    <ul>
            <!-- 下面代码中“竖线”为键盘上的分割线，“竖线”提交后不显示，所以用汉字代替！ -->
             <li ng-repeat="list in listData 竖线 filter: {type: filterType}">
                    <a href="#" ng-bind="list.title"></a>
                    <span ng-bind="list.price"></span>
            </li>
    </ul>
</div>

js代码

// 需引入 angular.js、filter.js
var app = angular.module('MyApp',[]);
app.controller('listCtrl',function($scope,$http){
    $http({
        method: 'GET',
        url: 'list.json'
    }).success(function(data,status,headers,config){
        $scope.listData = data.data.list;
        $scope.filterType = '';
        // 筛选门票类型
        $scope.showType = function(type){
            $scope.filterType = type;
        }
    }).error(function(data,status,headers,config){
        console.log('listCtrl Error!');
    })
});

点击查看更多内容