AngularJS滤镜通过选择空选项 [英] AngularJS filter by select with empty options

问题描述

我想建立一个过滤系统在AngularJS表。

我的产品，每个都连接到一个系统的列表。我希望能有一个选择列出的所有系统，并通过选择系统过滤产品。

除了选择空的选择选项，它过滤掉所有的系统这个伟大工程。

下面是我的例子code：

控制器：

 功能控制器（$范围）{
$ scope.products = [
    {ID：1，系统ID：1，名称：产品1}，
    {ID：2，系统ID：1，名称：产品2}，
    {ID：3，SYSTEM_ID：2，名称：产品3}
];$ scope.systems = [
    {ID：1，名称：系统1}，
    {ID：2，名称：系统2}，
    {ID：3，名称：系统3}
];
 

}

和HTML：

 ＆LT; D​​IV NG-NG应用程序控制器=控制器＆GT;系统：其中，选择NG模型=filter.system_idNG选项=system.id作为system.name系统中的系统＆GT;
            ＆LT;期权价值=＆GT;所有系统和LT; /选项＆GT;
        ＆LT; /选择＆GT;＆LT; UL＆GT;
＆LT;李NG重复=产品在产品|滤芯：过滤：真正的＆GT;
    {{ 产品名称 }}
    ＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

下面是一个工作的例子：

http://jsfiddle.net/9yk7a6v3/

我的最终目标是拥有多个过滤器，过滤器的地方是每个属性绑定到一个单独的选择过滤的对象。

我猜测的问题是，空的选项，这是造成上因为严格的选项平等假空字符串，但有一个方法，使之正确运行在这个siutation？

解决方案

  VAR应用= angular.module（'对myApp'，['myFilters的']）;angular.module（'myFilters的'，[]）。
过滤器（'customFilter'，函数（）{
    返回功能（产品，过滤器）{
        变种结果= [];
        的console.log（过滤器）;
        如果（！filter.system_id）{
            回报的产品;
        }
        angular.forEach（产品，功能（产品）{
            如果（product.system_id === filter.system_id）{
                results.push（产品）;
            }
        }）;
        返回结果;
    };
}）;
   ＆LT;李NG重复=产品在产品| customFilter：过滤器＆GT;
        {{ 产品名称 }}
        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
 

我们可以使用自定义过滤器来做到这一点。

在行动中看到

http://jsfiddle.net/xujihui1985/9yk7a6v3/2/

I am trying to build a filtering system for a table in AngularJS.

I have a list of products which are each tied to a system. I want to be able to have all systems listed in a select, and filter the products by the selected system.

This works great except for choosing the empty select option, which filters out all systems.

Here is my example code:

The controller:

function Controller($scope) {
$scope.products = [
    {id: 1, system_id: 1, name: 'Product 1'},
    {id: 2, system_id: 1, name: 'Product 2'},
    {id: 3, system_id: 2, name: 'Product 3'}
];   

$scope.systems = [
    {id: 1, name: 'System 1'},
    {id: 2, name: 'System 2'},
    {id: 3, name: 'System 3'}
];  

}

and the HTML:

<div ng-app ng-controller="Controller">

System: <select ng-model="filter.system_id" ng-options="system.id as system.name for system in systems">
            <option value="">All Systems</option>
        </select>

<ul>
<li ng-repeat="product in products | filter: filter : true">
    {{ product.name }}
    </li>
</ul>
</div>

Here is a working example:

http://jsfiddle.net/9yk7a6v3/

My end goal is to have multiple filters, where filter is the filtering object with each property tied to a separate select.

I am guessing that the problem is that the empty option is an empty string which is causing false on equality because of the strict option, but is there a way to make it behave correctly in this siutation?

解决方案

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

angular.module('myFilters', []).
filter('customFilter', function () {
    return function (products,filter) {
        var results = [];
        console.log(filter);
        if(!filter.system_id) {
            return products;
        }
        angular.forEach(products, function(product) {
            if(product.system_id === filter.system_id) {
                results.push(product);
            }
        });
        return results;
    };
});


   <li ng-repeat="product in products | customFilter: filter">
        {{ product.name }}
        </li>
    </ul>

we can use a custom filter to accomplish this

see in action

http://jsfiddle.net/xujihui1985/9yk7a6v3/2/

这篇关于AngularJS滤镜通过选择空选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！