Angular JS:在一列中按多个名称过滤

时间:2016-06-07 12:09:20

标签: angularjs angularjs-ng-repeat angularjs-filter

我是Angular JS的新手。目的是在一个文本框中显示不同大小的库存。
例如:如果用户输入180以及375那么对于那些尺寸,应显示库存。
HTML:

<div ng-app="myApp" ng-controller="myCtrl">
<div>
<table>
<tr>
<td>Search</td>
<td><input type="text" name="search" ng-model="search"/></td>
</tr>
</table>
</div>
 <table>
                     <tr>
                        <th>Size</th>.
                        <th>Stock</th>
                     </tr>

                     <tr ng-repeat = "subject in records| filter:search">
                        <td>{{ subject.size}}<td>
                        <td>{{ subject.stock }}</td>
                     </tr>

                  </table>

</div>

Angular JS:

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
       $scope.records = [
       {
            "size" : "180",
            "stock" : 250
        },{
            "size" : "180",
            "stock" : 150
        },{
            "size" : "375",
            "stock" : 100
        },{
            "size" : "750",
            "stock" : 150
        },{
            "size" : "1000",
            "stock" : 750
        },{
            "size" : "750",
            "stock" : 1500
        },{
            "size" : "180",
            "stock" : 500
        },{
            "size" : "375",
            "stock" : 650
        }
    ]



});
</script>

预期产出:

Search Box : 180,375
Size    Stock
180      250
180      150
180      500
375      100
375      650

是否有可能我不知道。如果是,请建议我。谢谢。

1 个答案:

答案 0 :(得分:2)

您可以像这样创建自定义过滤器:https://plnkr.co/edit/8FY2RnyE0AEgb659nkPe?p=preview

app.filter("multiple", function($filter) {
  return function(items, query) {
    return $filter('filter')(items, "size", function(v) {
      return query.indexOf(v.size) > -1;
    });
  };
});