Ng-repeat filter从object - angularjs否定字符串
ng-repeat filter negate string from object - angularjs
我想把这个filter: filter:'!类别"添加到该元素,如下所示:
<div ng-repeat="(prop, ignoredValue) in wines[0] | filter:'!Category'" ng-init="filter[prop]={}">
但是它不会过滤掉属性"Category"。但是,如果我在下面的ng-repeat元素上放置一个类似的过滤器来排除"Wine",它会工作得很好:
<span class="quarter" ng-repeat="opt in getOptionsFor(prop) | filter:'!Wine'">
我不明白为什么我不能在这里过滤掉属性值。我对angularjs非常陌生,我都快疯了。我想从对象中排除特定的属性名。"name"或"category"
我链接了下面的小提琴。任何帮助非常感激!谢谢!
jsfiddle <-链接到小提琴
<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]" /> {{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();
};
});
您可以先编写一个简单的过滤器来提取键:
app.filter('keys', function () {
return function (object) {
return Object.keys(object || {}).filter(function (key) {
return key !== '$$hashKey'; // this is from ng-repeat
});
};
});
,并像这样使用:
<div ng-repeat="prop in wines[0] | keys | filter:'!Category'"
示例JSFiddle: http://jsfiddle.net/1qhba9fs/1/
相关文章:
- AngularJS:获取链接中没有哈希的查询字符串值
- 如何将angularjs中的javascript字符串输出为循环数组
- AngularJS,如何更改查询字符串
- $scope变量被视为字符串AngularJs
- 如何在angularjs中实现html格式的字符串
- AngularJS-ng使用字符串索引在数组上重复
- 使用javascript或angularjs特定过滤器搜索字符串中第一个img标记的json值
- 用Angularjs+Typescript将GZip Json字符串解压为普通Json字符串
- AngularJS中的数组未拾取字符串值
- 如何使用AngularJS应用基于Json字符串响应的条件CSS类
- 如何在AngularJS URL中的hashtag(#)前面加上字符串
- 在AngularJS中创建JSON字符串
- 将Byte数组转换为Angularjs中的Base64字符串
- 从输入中获取字符串,并在AngularJS中发出AJAX请求
- Mysql日期时间字符串格式为angularjs中的可读日期
- AngularJs将查询字符串发布到c#控制器
- 将模板呈现为受信任的 HTML 字符串 [AngularJS]
- 为什么对象键的第一个值被视为字符串 - AngularJs
- 未捕获错误:[$http:badreq] Http 请求配置 url 必须是字符串 (AngularJS)
- ng-model with $watch只响应完整字符串(AngularJS)