這篇文章主要為大家展示了“angular怎么實(shí)現(xiàn)商品篩選功能”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“angular怎么實(shí)現(xiàn)商品篩選功能”這篇文章吧。

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)渝北免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎ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ù)渲染部分：

      
      
        產(chǎn)品編號
        產(chǎn)品各稱
        產(chǎn)品價(jià)錢
      
      
      
      
        {{value.id}}
        {{value.name}}
        {{value.price}}
      
      

    

說明：上面利用了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過濾器，搜索輸入字段

 搜索：
 
 
        {{value.id}}
        {{value.name}}
        {{value.price}}
      

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è)定排序的參考類型

      
      
        產(chǎn)品編號
        產(chǎn)品各稱
        產(chǎn)品價(jià)錢
      
      
      
        
          {{value.id}}
          {{value.name}}
          {{value.price}}
        
      
    

以上是“angular怎么實(shí)現(xiàn)商品篩選功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章題目：angular怎么實(shí)現(xiàn)商品篩選功能-創(chuàng)新互聯(lián)
文章路徑：http://weahome.cn/article/eossp.html