Question

我一直在想一种通过Name和Producer搜索产品的方法，而不仅仅是其中之一。通过文档查看，我找到了如何将搜索过滤器绑定到一种类型，但不是多种（不是全部）。例如，如果我有一个姓名，姓氏和电话号码的人员列表，我希望能够在一个输入字段中仅搜索名称和姓氏。如果我输入我的搜索字段，此模型将在Name和Producer中查找匹配项。我如何实现这一目标？

提前谢谢！我上面的代码。

HTML：

<div>
    <label>Search</label>
    <input ng-model="query" type="text" placeholder="Search for name or producer" autofocus>
    <label>
</div>

<table>
    <tr>
        <td>Name</td>
        <td>Producer</td>
        <td></td>
        <td>Type</td>
        <td>Packaging</td>
        <td>Is it alcoholic?</td>
        <td>Volume</td>
        <td>Popularity</td>
        <td>Country</td>
        <td>Added</td>
        <td>Price</td>
    </tr>
    <tr ng-repeat="item in products | filter:query | orderBy: drinkOrder:direction">
        <td>{{item.name}}</td>
        <td>{{item.producer}}</td>
        <td><img ng-src="img/{{item.picture}}.jpg" alt="{{item.name}}" height="50px"></td>
        <td>{{item.type}}</td>
        <td>{{item.packaging}}</td>
        <td>{{item.alko}}</td>
        <td>{{item.volume}}</td>
        <td>{{item.popularity}}</td>
        <td>{{item.country}}</td>
        <td>{{item.added}}</td>
        <td>{{item.price}}</td>
    </tr>
</table>

JS文件app.js：

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

myApp.controller('MyController', ['$scope', '$http', function ($scope, $http) {

    $http.get('/lynda/ithouse/js/data.json').success(function(data) {
        $scope.products = data;
        $scope.drinkOrder = 'popularity';       
    });
}]);

JSON文件：

[
{
    "name"       : "Sample Beer", 
    "producer"   : "Great Beer Producer",
    "picture"    : "two",
    "type"       : "beer",
    "packaging"  : "glass",
    "alko"       : "yes",
    "volume"     : "1",
    "popularity" : "1",
    "country"    : "Latvia",
    "added"      : "2015-01-03",
    "price"      : "20,40"
},{
    "name"       : "Sample Cider",
    "producer"   : "Great Cider Producer",
    "picture"    : "one",
    "type"       : "cider",
    "packaging"  : "plastic",
    "alko"       : "yes",
    "volume"     : "2",
    "popularity" : "3",
    "country"    : "Estonia",
    "added"      : "2015-01-03",
    "price"      : "20,40"
},{
    "name"       : "Best Wine",
    "producer"   : "Wine for You",
    "picture"    : "eight",
    "type"       : "wine",
    "packaging"  : "glass",
    "alko"       : "yes",
    "volume"     : "2",
    "popularity" : "5",
    "country"    : "Lithuania",
    "added"      : "2015-01-03",
    "price"      : "20,40"
},{
    "name"       : "Another Beer",
    "producer"   : "Beer Land",
    "picture"    : "seven",
    "type"       : "beer",
    "packaging"  : "aluminium",
    "alko"       : "no",
    "volume"     : "4",
    "popularity" : "2",
    "country"    : "Latvia",
    "added"      : "2015-05-03",
    "price"      : "21,40"
}
]

Answer 1

您可以创建自己的自定义过滤器，如下所示

过滤

.filter('customFilter', function() { return function(query) { var out = []; angular.forEach($scope.products, function(value, key) { if (value['name'] == query || value['producer'] == query) this.out.push(value) }) return out; } });

Fiddle Here

角度过滤器：搜索两类很多

1 个答案: