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

為定遠(yuǎn)等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及定遠(yuǎn)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、網(wǎng)站設(shè)計(jì)、定遠(yuǎn)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

一、demo功能分析

1、通過(guò)service()創(chuàng)建數(shù)據(jù)并遍歷渲染到頁(yè)面
2、根據(jù)輸入框的輸入值進(jìn)行字段查詢(xún)
3、點(diǎn)擊各列實(shí)現(xiàn)排序功能。

二、實(shí)現(xiàn)

1.1 數(shù)據(jù)定義與渲染

angular更偏向于是一個(gè)MVVM模式的框架，所以它的controller很薄，里面的業(yè)務(wù)邏輯也是少的，因此應(yīng)該養(yǎng)成把邏輯寫(xiě)在service或者Factory等angular提供的可以自定義服務(wù)的方法中。此次demo通過(guò)angular的service方法來(lái)注冊(cè)并定義商品數(shù)據(jù)。

angular.module("app",[])
.service("productData",function(){
  //通過(guò)service方法來(lái)定義數(shù)據(jù)，也可以通過(guò)factory方法來(lái)定義
  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ù)依賴(lài)
.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)品編號(hào)<span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">產(chǎn)品各稱(chēng)<span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">產(chǎn)品價(jià)錢(qián)<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>

說(shuō)明：上面利用了bootstrap的caret類(lèi)名來(lái)顯示出三角符號(hào)，并通過(guò)給父元素加dropup使三角符號(hào)轉(zhuǎn)向。
1、三角符號(hào)的轉(zhuǎn)向與否由ng-class指令確定，傳入表達(dá)式，當(dāng)order===‘ '時(shí)，為true，則給th加上dropup類(lèi)名
2、用ng-click指令綁定點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊就切換排序方式

2.2 搜索功能

采用angular的filter過(guò)濾器，搜索輸入字段

<!--輸入框采用ng-model綁定一個(gè)值-->
 搜索：<input type="text" ng-model="search">
 <!--通過(guò)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='';
   }
 }

頁(yè)面中：changeOrder()函數(shù)傳入“類(lèi)型”作為參數(shù)，并在函數(shù)內(nèi)部通過(guò)\ $scope.orderType=type;設(shè)定排序的參考類(lèi)型

<table class="table">
      <thead>
      <tr>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('id')">產(chǎn)品編號(hào)<span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('name')">產(chǎn)品各稱(chēng)<span class="caret"></span></th>
        <th ng-class="{dropup:order===''}" ng-click="changeOrder('price')">產(chǎn)品價(jià)錢(qián)<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)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱(chēng)：angular怎么實(shí)現(xiàn)商品篩選功能
轉(zhuǎn)載源于：http://www.chinadenli.net/article24/iiisje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、用戶(hù)體驗(yàn)、網(wǎng)站設(shè)計(jì)公司、域名注冊(cè)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)