javascript - Angularjs 基于下拉范围的搜索过滤器

Question

我有一个 Angular 下拉问题。我想用 ng-repeat 显示带有下拉选择值的项目并将它们分成范围。谁能帮忙 我好吗？

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;
}

Answer 1

您可以编写自定义 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