ng-repeat 过滤器否定来自对象的字符串 - angularjs [英] ng-repeat filter negate string from object - angularjs

问题描述

我想放这个过滤器:filter:'!Category'像这样转到这个元素:

但它不会过滤掉属性类别".但是，如果我在以下 ng-repeat 元素上放置一个类似的过滤器来排除Wine"，它就可以正常工作:

我不明白为什么我不能在这里过滤掉属性值.我对 angularjs 很陌生，我想弄清楚这个我已经疯了.我想从对象中排除特定的属性名称.名称"或类别"

我链接了下面的小提琴.非常感谢任何帮助！谢谢！

jsfiddle <- 链接到小提琴

<div ng-repeat="(prop, ignoreValue) in wines[0]" ng-init="filter[prop]={}"><b>{{道具 |大写第一}}:</b><br/><span class="quarter" ng-repeat="opt in getOptionsFor(prop)"><b><input type="checkbox" ng-model="filter[prop][opt]"/>&nbsp;{{opt}}</b></span><小时/>
<div ng-repeat="w in 过滤=(wines | filter:filterByProperties)">{{w.name}} ({{w.category}})

<小时/>结果数:{{filtered.length}}

var app = angular.module('myApp', []);app.controller('myCtrl', function ($scope) {$scope.wines = [{名称:酒A"，类别:红色"}，{名称:酒B"，类别:红色"}，{名称:葡萄酒C"，类别:白"}，{名称:酒D"，类别:红色"}，{名称:酒E"，类别:红色"}，{名称:酒F"，类别:白"}，{名称:葡萄酒G"，类别:香槟"}，{名称:葡萄酒H"，类别:香槟"}];$scope.filter = {};$scope.getOptionsFor = function (propName) {返回 ($scope.wines || []).map(function (w) {返回 w[propName];}).filter(函数(w, idx, arr) {返回 arr.indexOf(w) === idx;});};$scope.filterByProperties = 函数(酒){//使用此代码段与 AND 匹配var 匹配AND = true;for (var prop in $scope.filter) {if (noSubFilter($scope.filter[prop])) 继续；如果 (!$scope.filter[prop][wine[prop]]) {匹配与 = 假；休息;}}返回匹配项AND;/**//*//使用此代码段与 OR 匹配var 匹配OR = true;for (var prop in $scope.filter) {if (noSubFilter($scope.filter[prop])) 继续；如果 (!$scope.filter[prop][wine[prop]]) {匹配或 = 假；} 别的 {匹配或 = 真；休息;}}返回匹配或；/**/};函数 noSubFilter(subFilterObj) {for (subFilterObj 中的 var 键) {如果(subFilterObj[key])返回false；}返回真；}});app.filter('capitalizeFirst', function () {返回函数(str){str = str ||'';返回 str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase();};});

解决方案

您可以编写一个简单的过滤器来首先提取键:

app.filter('keys', function () {返回函数(对象){返回 Object.keys(object || {}).filter(function (key) {返回键 !== '$$hashKey';//这是来自 ng-repeat});};});

并像这样使用它:

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

示例 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-repeat 过滤器否定来自对象的字符串 - angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！