【问题标题】:How to count unique results based on a particular properties within ng-options如何根据 ng-options 中的特定属性计算唯一结果
【发布时间】:2015-12-22 19:57:32
【问题描述】:

我正在使用 AngularJS 并尝试创建一个过滤器来搜索属性。

我有一个这样的选择框:

<select 
    class="selectBox" 
    multiple="multiple" 
    ng-model="selectedSubArea" 
    ng-options="property.SubArea as (property.SubArea + ' ('+ filtered.length +')') for property in filtered = (properties | unique:'SubArea') | orderBy:'SubArea'">
</select>

这是独特的功能:

myApp.filter('unique', function() {
return function(input, key) {
    var unique = {};
    var uniqueList = [];
    for(var i = 0; i < input.length; i++){
        if(typeof unique[input[i][key]] == "undefined"){
            unique[input[i][key]] = "";
            uniqueList.push(input[i]);
        }
    }
    return uniqueList;
}; });

如何让filtered.length 工作?

这是我的JSFiddle

【问题讨论】:

    标签: angularjs ng-repeat ng-options


    【解决方案1】:

    这里有一个解决方案:

    http://jsfiddle.net/odpw6c6q/16/

    创建一个过滤器,返回带有计数的对象(它们在原始列表中的次数):

        myApp.filter('uniqueWithCount', function() {
            return function(input, key) {
                var unique = {};
                var uniqueList = [];
                var obj, val;
                for(var i = 0; i < input.length; i++){
                    val = input[i][key];
                    obj = unique[val];
                    if (!obj) {
                        obj = unique[val] = {data: input[i], count: 0};
                        uniqueList.push(obj);
                    }
                    obj.count++;
                }
                return uniqueList;
            };
        });
    

    在您的 HTML 中使用该过滤器:

    <select class="form-control" multiple="multiple" ng-model="selectedSubArea"
    ng-options="property.SubArea as (item.data.SubArea + ' ('+ item.count +')') for item in filtered = (properties | uniqueWithCount:'SubArea') | orderBy:'SubArea'"></select>
    

    【讨论】:

    • 我建议在控制器中进行过滤。因为所有这些过滤器都会在每个摘要中执行,这可能会对性能产生很大影响。
    • 感谢您的帮助!我不得不稍微调整它,但过滤器现在正在工作。你知道我怎样才能改变卧室的过滤器,以作为最小数量的卧室吗? (选择2间卧室时,显示所有物业,带2间卧室或更多卧室)这是我更新的 JSFiddle提前!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-08-13
    • 2021-11-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-21
    • 1970-01-01
    相关资源
    最近更新 更多