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

您可以否定過濾器表達式。 因此，您可以過濾掉isRight不是（ ! ）true的任何內容，而不是處理undefined 。 像這樣：

<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:'!'}">使用<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">

Answer 4

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>