您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“angular怎么實(shí)現(xiàn)商品篩選功能”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“angular怎么實(shí)現(xiàn)商品篩選功能”這篇文章吧。
一、demo功能分析
1、通過service()創(chuàng)建數(shù)據(jù)并遍歷渲染到頁面
2、根據(jù)輸入框的輸入值進(jìn)行字段查詢
3、點(diǎn)擊各列實(shí)現(xiàn)排序功能。
二、實(shí)現(xiàn)
1.1 數(shù)據(jù)定義與渲染
angular更偏向于是一個(gè)MVVM模式的框架,所以它的controller很薄,里面的業(yè)務(wù)邏輯也是少的,因此應(yīng)該養(yǎng)成把邏輯寫在service或者Factory等angular提供的可以自定義服務(wù)的方法中。此次demo通過angular的service方法來注冊并定義商品數(shù)據(jù)。
angular.module("app",[]) .service("productData",function(){ //通過service方法來定義數(shù)據(jù),也可以通過factory方法來定義 return [ { id:1002, name:'HuaWei', quantity:200, price:4300 }, { id:2123, name:'iphone7', quantity:38, price:6300 }, { id:3001, name:'XiaoMi', quantity:3, price:2800 }, { id:4145, name:'Oppo', quantity:37, price:2100 }, { id:5563, name:'Vivo', quantity:23, price:2100 } ] }) //傳入用service定義的productData數(shù)據(jù)依賴 .controller("myCtrl",function($scope,productData){ $scope.data=productData; //進(jìn)行相應(yīng)賦值 $scope.order=''; //單列排序用,后面詳解 $scope.changeOrder=function(type){ $scope.orderType=type; if($scope.order===''){ $scope.order='-'; }else{ $scope.order=''; } } })
數(shù)據(jù)渲染部分:
<table class="table"> <thead> <tr> <th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">產(chǎn)品編號<span class="caret"></span></th> <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">產(chǎn)品各稱<span class="caret"></span></th> <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">產(chǎn)品價(jià)錢<span class="caret"></span></th> </tr> </thead> <tbody> <tr ng-repeat="value in data|filter:{id:search}|orderBy:order+orderType"> <td>{{value.id}}</td> <td>{{value.name}}</td> <td>{{value.price}}</td> </tr> </tbody> </table>
說明:上面利用了bootstrap的caret類名來顯示出三角符號,并通過給父元素加dropup使三角符號轉(zhuǎn)向。
1、三角符號的轉(zhuǎn)向與否由ng-class指令確定,傳入表達(dá)式,當(dāng)order===‘ '時(shí),為true,則給th加上dropup類名
2、用ng-click指令綁定點(diǎn)擊事件,實(shí)現(xiàn)點(diǎn)擊就切換排序方式
2.2 搜索功能
采用angular的filter過濾器,搜索輸入字段
<!--輸入框采用ng-model綁定一個(gè)值--> 搜索:<input type="text" ng-model="search"> <!--通過filter:{id:search}實(shí)現(xiàn)以id為搜索內(nèi)容,以search的值為搜索基準(zhǔn)--> <tr ng-repeat="value in data|filter:{id:search}|orderBy:order+orderType"> <td>{{value.id}}</td> <td>{{value.name}}</td> <td>{{value.price}}</td> </tr>
2.3 排序功能
1、定義order屬性用于設(shè)置正序還是反序
2、定義orderType屬性用于設(shè)置參考排序的值
3、定義changeOrder()方法用于實(shí)現(xiàn)點(diǎn)擊就切換排序的功能
$scope.order=''; //當(dāng)order為‘'時(shí)正序 $scope.changeOrder=function(type){ //傳入屬性名,以此為基準(zhǔn)排序 $scope.orderType=type; if($scope.order===''){ $scope.order='-'; //order為'-'時(shí),反序 }else{ $scope.order=''; } }
頁面中:changeOrder()函數(shù)傳入“類型”作為參數(shù),并在函數(shù)內(nèi)部通過\ $scope.orderType=type;設(shè)定排序的參考類型
<table class="table"> <thead> <tr> <th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">產(chǎn)品編號<span class="caret"></span></th> <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">產(chǎn)品各稱<span class="caret"></span></th> <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">產(chǎn)品價(jià)錢<span class="caret"></span></th> </tr> </thead> <tbody> <tr ng-repeat="value in data|filter:{id:search}|orderBy:order+orderType"> <td>{{value.id}}</td> <td>{{value.name}}</td> <td>{{value.price}}</td> </tr> </tbody> </table>
以上是“angular怎么實(shí)現(xiàn)商品篩選功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。