基於下拉範圍的Angularjs搜索過濾器

我有一個有角度的下拉問題。我想用ng-repeat顯示下拉選定值的項目並將它們分割成範圍。任何人都可以幫助我嗎？基於下拉範圍的Angularjs搜索過濾器

的jsfiddle：http://jsfiddle.net/faridulhassan/cWVrV/1010/

這裏是我的代碼：

JS

var app = angular.module('myapp', []); 

app.controller('searchCtrl', ['$scope', '$http', function($scope, $http) { 
    $scope.results = [{ 
     "id": 1, 
     "name": "Allergy Relief", 
     "address": "87 Waxwing Court", 
     "link": "https://purevolume.com/viverra/eget/congue/eget/semper/rutrum/nulla.jpg", 
     "image": "https://dummyimage.com/143x130.bmp/ff4444/ffffff", 
     "size": 500, 
     "type": "all" 
    }, { 
     "id": 2, 
     "name": "Mirtazapine", 
     "address": "368 Rowland Terrace", 
     "link": "https://wordpress.com/vestibulum/proin/eu/mi/nulla/ac.png", 
     "image": "https://dummyimage.com/214x184.jpg/ff4444/ffffff", 
     "size": 900, 
     "type": "all" 
    }, { 
     "id": 3, 
     "name": "Doxepin Hydrochloride", 
     "address": "86065 Washington Trail", 
     "link": "https://reference.com/orci/vehicula/condimentum/curabitur/in/libero/ut.aspx", 
     "image": "https://dummyimage.com/146x224.png/cc0000/ffffff", 
     "size": 1000, 
     "type": "all" 
    }, { 
     "id": 4, 
     "name": "Lactulose", 
     "address": "478 Lillian Point", 
     "link": "https://china.com.cn/montes/nascetur/ridiculus/mus/etiam.jsp", 
     "image": "https://dummyimage.com/218x170.bmp/cc0000/ffffff", 
     "size": 1800, 
     "type": "commercial" 
    }, { 
     "id": 5, 
     "name": "Clindamycin Phosphate", 
     "address": "995 Rowland Junction", 
     "link": "https://facebook.com/auctor/gravida.json", 
     "image": "https://dummyimage.com/113x123.png/5fa2dd/ffffff", 
     "size": 2000, 
     "type": "residential" 
    }, { 
     "id": 6, 
     "name": "Neutrogena Men Triple Protect Face", 
     "address": "4128 Columbus Circle", 
     "link": "https://ibm.com/proin/eu/mi.html", 
     "image": "https://dummyimage.com/235x184.png/cc0000/ffffff", 
     "size": 2446, 
     "type": "all" 
    }, { 
     "id": 7, 
     "name": "Ibuprofen", 
     "address": "3357 Garrison Circle", 
     "link": "https://scientificamerican.com/quam.js", 
     "image": "https://dummyimage.com/149x232.jpg/5fa2dd/ffffff", 
     "size": 2800, 
     "type": "residential" 
    }, { 
     "id": 8, 
     "name": "VANACOF", 
     "address": "01888 Messerschmidt Center", 
     "link": "https://taobao.com/in/magna.jpg", 
     "image": "https://dummyimage.com/147x245.jpg/cc0000/ffffff", 
     "size": 4572, 
     "type": "commercial" 
    }, { 
     "id": 9, 
     "name": "Oxazepam", 
     "address": "2 Harper Crossing", 
     "link": "https://sakura.ne.jp/lectus.json", 
     "image": "https://dummyimage.com/183x248.jpg/cc0000/ffffff", 
     "size": 2900, 
     "type": "residential" 
    }, { 
     "id": 10, 
     "name": "Blistex", 
     "address": "94401 Melody Lane", 
     "link": "https://istockphoto.com/non/sodales.html", 
     "image": "https://dummyimage.com/204x196.jpg/5fa2dd/ffffff", 
     "size": 2350, 
     "type": "residential" 
    }, { 
     "id": 11, 
     "name": "Axe", 
     "address": "3851 Melody Center", 
     "link": "https://storify.com/nulla.jsp", 
     "image": "https://dummyimage.com/159x126.bmp/ff4444/ffffff", 
     "size": 9258, 
     "type": "commercial" 
    }, { 
     "id": 12, 
     "name": "ESIKA Perfect Match", 
     "address": "3 American Avenue", 
     "link": "https://google.de/quam.png", 
     "image": "https://dummyimage.com/155x229.png/ff4444/ffffff", 
     "size": 7219, 
     "type": "all" 
    }, { 
     "id": 13, 
     "name": "PCA SKIN Body Hydrator", 
     "address": "34 East Road", 
     "link": "https://marketwatch.com/vulputate.aspx", 
     "image": "https://dummyimage.com/174x146.jpg/cc0000/ffffff", 
     "size": 1623, 
     "type": "commercial" 
    }, { 
     "id": 14, 
     "name": "CLARINS Daily Energizer SPF 15", 
     "address": "07369 Northview Lane", 
     "link": "https://pagesperso-orange.fr/augue/luctus/tincidunt/nulla/mollis/molestie.jpg", 
     "image": "https://dummyimage.com/181x207.png/dddddd/000000", 
     "size": 2350, 
     "type": "all" 
    }, { 
     "id": 15, 
     "name": "OXYGEN", 
     "address": "60 Drewry Pass", 
     "link": "https://sourceforge.net/vestibulum.png", 
     "image": "https://dummyimage.com/243x176.jpg/cc0000/ffffff", 
     "size": 7678, 
     "type": "all" 
    }, { 
     "id": 16, 
     "name": "Dove", 
     "address": "68 Anthes Center", 
     "link": "https://unc.edu/at.html", 
     "image": "https://dummyimage.com/218x231.bmp/cc0000/ffffff", 
     "size": 9999, 
     "type": "residential" 
    }, { 
     "id": 17, 
     "name": "Joints and Muscles Pain Relieving", 
     "address": "25 Coleman Lane", 
     "link": "https://360.cn/aenean/auctor/gravida.json", 
     "image": "https://dummyimage.com/127x118.bmp/dddddd/000000", 
     "size": 9501, 
     "type": "all" 
    }, { 
     "id": 18, 
     "name": "Healthy Accents Famotidine", 
     "address": "4 Melrose Junction", 
     "link": "https://nytimes.com/ultrices/posuere/cubilia/curae/mauris.png", 
     "image": "https://dummyimage.com/250x183.bmp/cc0000/ffffff", 
     "size": 8776, 
     "type": "residential" 
    }, { 
     "id": 19, 
     "name": "sunmark nite time", 
     "address": "03 Mallard Way", 
     "link": "https://thetimes.co.uk/vel/pede/morbi/porttitor/lorem/id.xml", 
     "image": "https://dummyimage.com/185x241.bmp/dddddd/000000", 
     "size": 1274, 
     "type": "all" 
    }, { 
     "id": 20, 
     "name": "Bupivacaine Hydrochloride", 
     "address": "964 Elka Place", 
     "link": "https://cmu.edu/auctor/gravida/sem/praesent/id.aspx", 
     "image": "https://dummyimage.com/203x208.bmp/dddddd/000000", 
     "size": 5609, 
     "type": "residential" 
    }]; 

}]);

HTML

<div class="container-fluid" ng-app="myapp" ng-controller="searchCtrl"> 
<div class="row"> 
    <div class="col-xs-6"> 
     <div class="well"> 
      <form class="form-primary text-white"> 
       <div class="form-group"> 
        <div> 
         <label for="search.size">By Size (Sft)</label> 
         <select name="search.size" id="search.size" ng-model="search.size"> 
          <option value="">All Size</option> 
          <option value="600-1000">BELOW 1000</option> 
          <option value="1001-1500">1000 - 1500</option> 
          <option value="1501-2000">1500 - 2000</option> 
          <option value="2001-2500">2000 - 2500</option> 
          <option value="2601-3000">2500 - 3000</option> 
          <option value="3001-15000">ABOVE 3000</option> 
         </select> 
        </div> 
       </div> 

      </form> 
     </div> 
    </div> 
    <div class="col-xs-6"> 
     <div class="well"> 
      <ul class="search-result-list"> 
       <li ng-repeat="result in filteredResuls = (results | filter:search) | orderBy:name"> 
        <a ng-href="{{result.link}}" target="_blank" class=""> 
         <div class="search-thumb" style="background-image: url({{result.image}});"> 

         </div> 
         <div class="search-meta"> 
          <h3 class="search-item-title">{{result.name}}</h3> 

         </div> 
        </a> 
       </li> 
      </ul> 
     </div> 

    </div> 
</div>

CSS

ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

a { 
    text-decoration: none; 
    display: flex; 
    align-items: flex-start; 
    width: 100%; 
    margin-bottom: 5px; 
} 

h3 { 
    font-size: 12px; 
    margin-top: 0; 
} 

.search-thumb { 
    width: 50px; 
    height: 50px; 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    background-size: cover; 
} 

.search-meta { 
    padding-left: 5px; 
}

來源

2017-03-18 Faridul Hassan

您可以編寫自定義filter功能，可以過濾掉根據項目範圍。事情是這樣的：

$scope.searchSize = function(obj) { 
    if($scope.size && obj.size) { 
    var range = $scope.size.split("-"); 
    if(obj.size >= Number(range[0]) && obj.size <= Number(range[1])) { 
     return true; 
    } 
    return false; 
    } 
    return true; 
}

這裏的working fiddle

來源

2017-03-18 06:30:51 tanmay

謝謝。它也工作:) –

@FaridulHassan [你的工作小提琴與其他過濾器]（http://jsfiddle.net/cWVrV/1015/）請標記爲我接受，如果它幫助：D – tanmay

非常感謝@tanmay。現在它完全正常工作:) –

創建這樣

$scope.searchPro = function(name){ 
    return function(item){ 
    debugger 
    if(name && name != ""){ 
     var arr = name.split("-"); 
     if(parseInt(arr[0]) <= item.size && parseInt(arr[1]) >= item.size){ 
      return item; 
     } 
    }else{ 
     return item 
    } 
    } 
    }

調用自定義過濾器從納克重複這樣

ng-repeat="result in filteredResuls = (results | filter:searchPro(search.size)) | orderBy:name"

自定義過濾器

Demo

來源

2017-03-18 06:29:41

非常感謝你。它的工作:) –

嗨@sachila ranawaka，集成您的解決方案後，我的其他領域工作不正常。你可以試試這個小提琴吧 - http://jsfiddle.net/faridulhassan/cWVrV/1013/ –

基於下拉範圍的Angularjs搜索過濾器

回答

相關問題