AngularJS - 过滤ng-repeat中未定义的属性？

Question

对于我的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}">

这更像是一种好奇而不是需要,但我感谢任何建议.

Answer 1

您可以否定过滤器表达式.所以,不要与undefined你打交道,只需过滤掉isRight不是(!)的任何东西.像这样:

<li ng-repeat="link in nav | filter:{isRight:'!true'} ">

当然,相反,你可以这样做:

<li ng-repeat="link in nav | filter:{isRight:'true'} ">

演示小提琴

Answer 2

你也可以使用 <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>

Answer 3

编辑

我只是重读了这个问题,这不是你要找的答案.我将把它留在这里用于文档目的,但我不认为有一种方法可以获得您想要的功能,无需构建自定义过滤器或使用自定义过滤器功能.

为了扩展为什么查找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">