[英]AngularJS - filter for undefined properties in ng-repeat?
对于我的AngularJS项目(v1.2.3),我有一个路由列表,我正在尝试从对象构建导航栏。 我想要做的是在一种样式中显示具有未定义的isRight
属性的任何对象,并在另一种样式中定义属性。
在一个ng-repeat
我想用未定义的isRight
属性过滤那些对象。 如何在ng-repeat
属性中完成此操作,而不必求助于创建自定义过滤器功能?
$scope.nav = [
{ path: '/', title: 'Home' },
{ path: '/blog', title: 'Blog' },
{ path: '/about', title: 'About' },
{ path: '/login', title: 'Login', isRight: true }
];
我意识到我可以只为每个对象添加属性isRight: false
,或者为左右侧链接添加单独的导航对象,以及其他这样简单的解决方法,但我很好奇是否有办法用当前结构完成此操作,使用以下内容:
<li ng-repeat="link in nav | filter:{isRight:undefined}">
这更像是一种好奇而不是需要,但我感谢任何建议。
您可以否定过滤器表达式。 因此,您可以过滤掉isRight
不是( !
)true的任何内容,而不是处理undefined
。 像这样:
<li ng-repeat="link in nav | filter:{isRight:'!true'} ">
当然,相反,你可以这样做:
<li ng-repeat="link in nav | filter:{isRight:'true'} ">
你也可以<li ng-repeat="link in nav | filter:{isRight:'!'}">
使用<li ng-repeat="link in nav | filter:{isRight:'!'}">
另请参见如何在AngularJS中显示未定义表达式值的占位符?
var app = angular.module('myApp', []) app.controller('mainCtrl',['$scope' , function($scope) { $scope.nav = [ { path: '/', title: 'Home' }, { path: '/blog', title: 'Blog' }, { path: '/about', title: 'About' }, { path: '/login', title: 'Login', isRight: true } ]; }])
<div ng-app="myApp" ng-controller="mainCtrl"> <h3>!isRight</h3> <ul> <li ng-repeat="link in nav | filter:{isRight:'!'}">{{link.title}}</li> </ul> <h3>isRight</h3> <ul> <li ng-repeat="link in nav | filter:{isRight:'!!'}">{{link.title}}</li> </ul> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
编辑
我只是重读了这个问题,这不是你要找的答案。 我将把它留在这里用于文档目的,但我不认为有一种方法可以获得您想要的功能,无需构建自定义过滤器或使用自定义过滤器功能。
为了扩展为什么查找undefined将无法使用默认过滤器,我们将从AngularJS filter
实现中查看此代码。
switch (typeof expression) {
...
case "object":
// jshint +W086
for (var key in expression) {
(function(path) {
if (typeof expression[path] == 'undefined') return;
predicates.push(function(value) {
return search(path == '$' ? value : getter(value, path), expression[path]);
});
})(key);
}
break;
...
}
如果undefined
过滤器对象属性的值,则不会向谓词数组添加谓词函数。 在您的情况下,您将isRight
属性的值设置为undefined
(您的过滤器表达式为{isRight:undefined}
)。
原始答案
您始终可以使用谓词函数来创建任意过滤器( 文档 )。
谓词函数可用于写入任意过滤器。 为数组的每个元素调用该函数。 最终结果是谓词返回true的那些元素的数组。
在您的控制器中创建一个方法来选择您想要的项目
$scope.isRightUndefined = function(item) {
return item.isRight === undefined;
}
并改变你的重复
<li ng-repeat="link in nav | filter:isRightUndefined">
module.filter('notNullOrUndefined', [function () {
return function (items, property) {
var arrayToReturn = [];
for (var i = 0; i < items.length; i++) {
var test = property !== undefined ? items[i][property] : items[i];
if (test !== undefined && test !== null) {
arrayToReturn.push(items[i]);
}
}
return arrayToReturn;
};
}]);
用法:
<div class="col-md-12" ng-repeat="style in styles | notNullOrUndefined:'background'">
<span class="ed-item">{{style.name}} Background</span>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.