角度过滤器通过选择值

我有一个应用程序，我想根据包含产品类型的“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>

来源

2016-03-11 Andreas Skagestad

这是什么意思是$ scope.products = {[...]}; ？它应该是数组$ scope.products = [{...}，...];或对象$ scope.products = {};这个例子不起作用。 –

我建议使用NG选项，而不是NG重复在选项里面ofType必须返回未定义（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

来源

2016-03-11 10:47:06 FelixMelix

谢谢。这解决了我的问题:) –

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

的Slava.N的评论是正确的，您不应将产品类型和产品包装在{}

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

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

为“显示所有”，过滤器：

来源

2016-03-11 10:36:02 idmitme

使用product.Type，而不是第二次NG重复过滤

来源

2016-03-11 10:39:21

嗯...似乎总是过滤掉所有的东西 –

它究竟在做什么？ –

设置$ scope.productFilter = ''。所以它的默认返回值是空白过滤器。

来源

2016-03-11 11:25:32 viral

角度过滤器通过选择值

回答

相关问题