Question

我有一个应用程序，我希望根据包含产品类型的“select”的值过滤一长串产品。过滤器有效，但只有在我选择了某些东西之后。它最初设置“全部显示”选项，但过滤掉所有内容。如果我选择其他东西，它就可以了，如果我重新选择“全部显示”，它就有效。但为什么过滤器最初没有工作？

模型（看起来像这样）：

$scope.products = {[
    {name: 'productA',Type: 1},
    {name: 'productB',Type: 1},
    {name: 'productC',Type: 2},
    {name: 'productD',Type: 2},
]};

$scope.productTypes = {[
    {Name: 'typeAlpha',Type: 1},
    {Name: 'typeBravo',Type: 2},
]};

HTML：

<select id="productFilter" data-ng-model="productFilter">
    <option value="" selected="selected">Show all</option>
    <option data-ng-repeat="type in productTypes" value="{{type.Type}}">{{type.Name}}</option>          
</select>
<p data-ng-repeat="product in products | filter:{Type:productFilter} ">{{product.Name}}</p>

Answer 1

我建议在选项上使用ng-options而不是ng-repeat：

<select id="productFilter" ng-model="productFilter" 
  data-ng-options="type.type as type.name for type in productTypes">
    <option value selected="selected">Show all</option>
</select>
<p data-ng-repeat="product in products | filter:(!!productFilter || undefined) && {type: productFilter}">
    {{product.name}}
</p>

对于＆＃34;显示全部＆＃34;，过滤器必须返回undefined（ng-repeat filter "show all" items if no filter selected）

还删除了数组周围的{..}，并更好地使用小写的属性：

  $scope.products = [
    {name: 'productA', type: 1},
    {name: 'productB', type: 1},
    {name: 'productC', type: 2},
    {name: 'productD', type: 2}
  ];

  $scope.productTypes = [
    {name: 'typeAlpha', type: 1},
    {name: 'typeBravo', type: 2}
  ];

这是一个jsbin（基于Hiskinds） http://jsbin.com/yepaqikodo/1/edit?html,js,output

Answer 2

这是基于上述代码的工作示例：http://jsbin.com/buzafisuko/edit?html,js,output

Slava.N的评论是正确的，你不应该在{}

中包装productTypes和product

此外，JavaScript是一种区分大小写的语言，product.Name始终未定义，您应该在HTML中使用product.name。

Answer 3

在2nd ng-repeat filter

中使用product.Type而不是Type

Answer 4

你设置$ scope.productFilter =''。所以它在默认值下的返回值为空白。

通过选择值进行角度过滤

4 个答案: