从对象NG-重复过滤否定的字符串 - angularjs [英] ng-repeat filter negate string from object - angularjs

问题描述

我想把这个滤芯：过滤：'分类'
   上像这样这个元素：

 ＆LT; D​​IV NG重复的葡萄酒（道具，ignoredValue）[0​​] |过滤器：'分类'= NG-的init =过滤器[道具] = {} ＆GT;
 

不过，这并不过滤掉属性类别。但是，如果我把一个类似的过滤器，以排除酒下面的NG-repeat元素上，它工作正常：

 ＆LT;跨度类=季度NG重复=选择在getOptionsFor（丙）|过滤器：'酒'＆GT;
 

我不明白为什么我不能在这里过滤掉属性值。我很新的angularjs，我走出去我的脑海试图弄清楚这一点。我想从对象中排除特定的属性名称。无论是名或类别

我联系下面的小提琴。任何帮助非常AP preciated！谢谢！

的jsfiddle ＆LT; - 链接到小提琴

 ＆LT; D​​IV NG控制器=myCtrl＆GT;
＆LT; D​​IV NG重复=在葡萄酒（道具，ignoredValue）[0​​]NG-的init =过滤器[道具] = {}＆GT;
    ＆LT; B＆GT; {{道具| capitalizeFirst}}：LT; / B＆GT;＆LT; BR /＆GT;
    ＆LT;跨度类=季度NG重复=选择在getOptionsFor（丙）＆GT;
        ＆LT; B＆GT;＆LT;输入类型=复选框NG模型=过滤器[道具] [选择]/＆GT;＆安培; NBSP; {{选择}}＆LT; / B＆GT;
    ＆LT; / SPAN＆GT;
    ＆LT;小时/＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV NG重复=w的过滤=（葡萄酒|过滤器：filterByProperties）＆GT;
    {{w.name}}（{{w.category}}）
＆LT; / DIV＆GT;
＆LT;小时/＆GT;
结果数：{{filtered.length}}
 

  VAR应用= angular.module（'对myApp'，[]）;
app.controller（'myCtrl'，函数（$范围）{
$ scope.wines = [
    {名酒，类别：红}，
    {名：酒B类：红}，
    {名：酒C类：白}，
    {名：酒D类：红}，
    {名：酒E类：红}，
    {名：酒F类：白}，
    {名：酒G类：香槟}，
    {名：酒H类：香槟}
];
$ scope.filter = {};$ scope.getOptionsFor =功能（作为propName）{
    返回（$ scope.wines || []）。图（函数（W）{
        返回W [作为propName]
    }）。过滤器（功能（W，IDX，编曲）{
        返回arr.indexOf（W）=== IDX;
    }）;
};$ scope.filterByProperties =功能（酒）{
    //使用这个片段与匹配和
    VAR matchesAND = TRUE;
    为（在$ scope.filter VAR道具）{
        如果（noSubFilter（$ scope.filter [道具]））继续;
        如果（！$ scope.filter [道具] [酒[道具]]）{
            matchesAND = FALSE;
            打破;
        }
    }
    返回matchesAND;
/ ** /
/ *
    //使用这个片段与匹配OR
    VAR matchesOR = TRUE;
    为（在$ scope.filter VAR道具）{
        如果（noSubFilter（$ scope.filter [道具]））继续;
        如果（！$ scope.filter [道具] [酒[道具]]）{
            matchesOR = FALSE;
        }其他{
            matchesOR = TRUE;
            打破;
        }
    }
    返回matchesOR;
/ ** /
};功能noSubFilter（subFilterObj）{
    对（在subFilterObj VAR键）{
        如果（subFilterObj [关键]）返回false;
    }
    返回true;
}
}）;app.filter（'capitalizeFirst'，函数（）{
复位功能（STR）{
    海峡= ||海峡'';
    返回str.substring（0,1）.toUpperCase（）+ str.substring（1）.toLowerCase（）;
};
}）;
 

解决方案

您可以编写一个简单的过滤器，第一次提取键：

  app.filter（'键'，函数（）{
    复位功能（对象）{
        返回Object.keys（对象|| {}）。过滤器（功能（键）{
            返回键=='$$ hashKey'！; //这是NG-重复
        }）;
    };
}）;
 

和使用这样的：

 ＆LT; D​​IV NG重复=道具在葡萄酒[0] |键|过滤器：'分类'
 

示例的jsfiddle： http://jsfiddle.net/1qhba9fs/1/

希望这有助于。

I want to put this filter: filter:'!Category' on to this element like so:

<div ng-repeat="(prop, ignoredValue) in wines[0] | filter:'!Category'" ng-init="filter[prop]={}">

But it does not filter out the property "Category". However if I put a similar filter to exclude "Wine" on the following ng-repeat element, it works fine:

<span class="quarter" ng-repeat="opt in getOptionsFor(prop) | filter:'!Wine'">

I don't understand why I can't filter out property values here. I am very new to angularjs and I'm going out of my mind trying to figure this out. I want to exclude specific property names from the object. either "name" or "category"

I linked the fiddle below. Any help much appreciated! Thanks!

jsfiddle <- link to the fiddle

<div ng-controller="myCtrl">
<div ng-repeat="(prop, ignoredValue) in wines[0]" ng-init="filter[prop]={}">
    <b>{{prop | capitalizeFirst}}:</b><br />
    <span class="quarter" ng-repeat="opt in getOptionsFor(prop)">
        <b><input type="checkbox" ng-model="filter[prop][opt]" />&nbsp;{{opt}}</b>
    </span>
    <hr />
</div>
<div ng-repeat="w in filtered=(wines | filter:filterByProperties)">
    {{w.name}} ({{w.category}})
</div>
<hr />
Number of results: {{filtered.length}}

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.wines = [
    { name: "Wine A", category: "red" },
    { name: "Wine B", category: "red" },
    { name: "wine C", category: "white" },
    { name: "Wine D", category: "red" },
    { name: "Wine E", category: "red" },
    { name: "wine F", category: "white" },
    { name: "wine G", category: "champagne"},
    { name: "wine H", category: "champagne" }    
];
$scope.filter = {};

$scope.getOptionsFor = function (propName) {
    return ($scope.wines || []).map(function (w) {
        return w[propName];
    }).filter(function (w, idx, arr) {
        return arr.indexOf(w) === idx;
    });
};

$scope.filterByProperties = function (wine) {
    // Use this snippet for matching with AND
    var matchesAND = true;
    for (var prop in $scope.filter) {
        if (noSubFilter($scope.filter[prop])) continue;
        if (!$scope.filter[prop][wine[prop]]) {
            matchesAND = false;
            break;
        }
    }
    return matchesAND;
/**/
/*
    // Use this snippet for matching with OR
    var matchesOR = true;
    for (var prop in $scope.filter) {
        if (noSubFilter($scope.filter[prop])) continue;
        if (!$scope.filter[prop][wine[prop]]) {
            matchesOR = false;
        } else {
            matchesOR = true;
            break;
        }
    }
    return matchesOR;
/**/
};

function noSubFilter(subFilterObj) {
    for (var key in subFilterObj) {
        if (subFilterObj[key]) return false;
    }
    return true;
}
});

app.filter('capitalizeFirst', function () {
return function (str) {
    str = str || '';
    return str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase();
};
});

解决方案

You could write a simple filter to extract keys first:

app.filter('keys', function () {
    return function (object) {
        return Object.keys(object || {}).filter(function (key) {
            return key !== '$$hashKey'; // this is from ng-repeat
        });
    };
});

and use it like this:

<div ng-repeat="prop in wines[0] | keys | filter:'!Category'"

Example JSFiddle: http://jsfiddle.net/1qhba9fs/1/

Hope this helps.

这篇关于从对象NG-重复过滤否定的字符串 - angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！