angular學習input輸入框篩選

時間 2019-11-16

標籤 angular 學習 input 輸入篩選欄目 AngularJS 简体版

原文原文鏈接

學習angular，看到 angular-phonecat測試用例，照着教程運行了一遍，對於初學者有點不是很理解angular 帥選代碼的意思，因而找教材，參考資料，明白了input篩選原來這麼簡單。css

html部分html

<!doctype html>
<html lang="en" ng-app="listModule">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <script src="js/angular.js"></script>
    <script src="js/controller.js"></script>
    <title>篩選</title>
</head>
<body>
<div class="container" ng-controller="listCtrl">
    <div class="panel panel-default">
        <div class="panel-heading">input篩選</div>
        <div class="panel-body">
            <div class="row">
                <!--左側篩選-->
                <div class="col-md-3">
                    <!--按鈕組篩選-->
                    <div class="btn-group btn-group-justified form-group">
                        <div class="btn-group" ng-repeat="tab in listtab" ng-click="clicktab(tab.sex)">
                            <button type="button" class="btn btn-default">{{tab.sex}}</button>
                        </div>
                    </div>
                    <!--input篩選-->
                    <div class="form-group">
                        <input type="text" class="form-control" ng-model="text">
                    </div>
                    <!--下拉列表篩選-->
                    <div class="form-group">
                        <select ng-model="orderlist" class="form-control">
                            <option value="price">價格</option>
                            <option value="sex">sex</option>
                        </select>
                    </div>
                </div>
                <!--右側展現內容-->
                <div class="col-md-9">
                    <div class="tab thumbnail" ng-repeat="product in list | filter:text | orderBy:orderlist | filter:filtertab">
                        <h4 class="text-danger">{{product.price | currency:"￥"}}</h4>
                        <h3 class="text">{{product.name}}</h3>
                        <p class="text-info">{{product.describe}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

html裏邊的幾個重點是過濾這款json

1.filter:text， text是左側input輸入內容這塊，ng-model="text";angular自動的就篩選內容；bootstrap

2.orderBy:orderlist,AngularJS中orderBy進行排序,詳細內容參考：http://www.cnblogs.com/freshcoder/p/4966375.html，app

　　orderlist是左側下拉列表，下拉列表所選擇的的值，值是與右側json裏的要相同，才能進行排序學習

3.filter:filtertab ,自定義過濾器，篩選的內容也是兩個json裏共有的。測試

controller.jsui

var app = angular.module('listModule',[]);
app.controller('listCtrl',function($scope,$http){
    $scope.orderlist = 'price';//下拉列表默認選中價格，默認是以價格排序的
    $http.get('data/list-tab.json').success(function(tab){//按鈕組
        $scope.listtab = tab;
    });
    $http.get('data/list.json').success(function(list){//商品列表
        $scope.list = list;
    });
    // 點擊導航條保存商品種類
    $scope.clicktab = function(sex){
        $scope.showsex=sex;
    };
    // 設置過濾器
    $scope.filtertab=function(product){
        // 這裏至關於給全局變量賦值，product.sex ng-repeat循環出來的
        return $scope.showsex==product.sex || $scope.showsex==null;
    }
})

這裏的js比較簡單主要的angular都已經給封裝好了，spa

兩個json內容scala

[
  {"id":"001","sex":"男裝"},
  {"id":"002","sex":"女裝"},
  {"id":"002","sex":"童裝"}
]


[
  {"price":"33.45","name":"GXG男裝 冬裝新品毛衣90%白鴨絨輕薄羽絨拼接針織衫毛衫", "describe":"GXG官方旗艦店","sex":"男裝"},
  {"price":"34","name":"韓版秋冬時尚修身顯瘦連帽小棉襖","describe":"泉山億井旗艦店","sex":"女裝"},
  {"price":"46.4","name":"一貝皇城男童小孩兒童中大童冬裝","describe":"一貝皇城官方旗艦店","sex":"童裝"},
  {"price":"43.45","name":"軍旅式外套(MA-1)(仿皮)", "describe":"優衣庫官方旗艦店","sex":"男裝"},
  {"price":"45","name":"太平鳥秋冬寬鬆半高領插肩袖套頭衛衣","describe":"太平鳥官方旗艦店","sex":"女裝"},
  {"price":"53.4","name":"男童加厚冬季兒童中大童棉襖","describe":"玖玖蘇榮旗艦店","sex":"童裝"}
]