AngularJS學習-(左側導航欄篩選、input輸入框篩選)
阿新 • • 發佈：2019-02-08
1、HTML程式碼
<body ng-controller="showProduct"> <!-- 左側導航欄 --> <div class="nav-list" > <a ng-click="clickNav()">首頁</a> <a ng-repeat="nav in navList" ng-click="clickNav(nav.classify)" ng-class="focusNav(nav.classify)">{{nav.classify}}</a> </div> <!-- 右側顯示錶單內容 --> <div class="tab-cont"> <!-- 表單輸入過濾 --> <input type="text" placeholder="輸入關鍵字搜尋" ng-model="selt"/> <!-- 迴圈出商品詳細資訊 --> <div class="tab" ng-repeat="product in productDetail | filter:filterNav | filter:selt"> <h3>{{product.name}}</h3> <p>{{product.describe}}</p> <h4>{{product.price | currency:"￥RMB:"}}</h4> <button>加入購物車</button> </div> </div> </body>
2、JS程式碼
var productApp=angular.module("productStore",[]); productApp.controller("showProduct",function($scope){ // 定義顯示的商品資訊 $scope.showClassify=null; // 定義開始頁數 $scope.startPage=1; // 定義每頁顯示條數 $scope.pageNum=2; // 點選導航條儲存商品種類 $scope.clickNav=function(Classify){ $scope.startPage=1; $scope.showClassify=Classify; alert(Classify); } // 設定過濾器 $scope.filterNav=function(product){ // 這裡相當於給全域性變數賦值，product.classify是由ng-repeat迴圈出來的 return $scope.showClassify==product.classify || $scope.showClassify==null; } // 設定下一頁 $scope.nextFoot=function(data){ $scope.startPage=data; } // 設定選中樣式 $scope.focusNav=function(data){ if(data==$scope.showClassify||data==$scope.startPage){ return "active"; } } // 設定左側導航欄展示的json資料 $scope.navList=[ {"id":"001","classify":"商品分類1"}, {"id":"002","classify":"商品分類2"}, {"id":"003","classify":"商品分類3"} ]; // 設定商品詳情json資料 $scope.productDetail=[ { "name":"商品1", "describe":"商品1的描述", "price":"33.44", "classify":"商品分類1" }, { "name":"商品2", "describe":"商品2的描述", "price":"55.66", "classify":"商品分類2" }, { "name":"商品3", "describe":"商品3的描述", "price":"88.66", "classify":"商品分類3" } ] });