Angularjs Select ng-options 中对象的过滤器不为空：

Question

我正在尝试过滤掉 angular 1.5.6 中属于对象而非 null 的项目。

我尝试了这个 post 的所有选项。

仍然无法正常工作。

只有 'Sally' 应该显示在 select

HTML :

<div ng-app="myApp" ng-controller="myCtrl">
   <br>

     <select ng-model="a" ng-options="detail.name for detail in details | filter:{shortDescription:'!null'} track by detail.name">
  </select>

    <br>
    New 

     <select ng-model="b" ng-options="detail.name for detail in details | filter:{shortDescription: ''} track by detail.name">
  </select>

    <br>
    All
    <select  ng-model="c" ng-options="detail.name for detail in details | filter:{shortDescription: '!!'} track by detail.name">
  </select>

  <br>
  Without any filter
  <select ng-model="d" ng-options="detail.name for detail in details track by detail.name">
  </select>
  <!-- -->
</div>

脚本：

function myCtrl($scope) {
    $scope.details = [{
        name: 'Bill',
        shortDescription: null
    }, {
        name: 'Sally',
        shortDescription: {'MyName':'A girl'}
    }];
}

angular.module("myApp",[]).controller("myCtrl", myCtrl);

Answer 1

请运行这个片段来实现你的目标

function myCtrl($scope) {
    $scope.details = [{
        name: 'Bill',
        shortDescription: null
    }, {
        name: 'Sally',
        shortDescription: {'MyName':'A girl'}
    }];

}

angular.module("myApp",[]).controller("myCtrl", myCtrl).filter('descFilter',descFilter);

function descFilter(){
 return function(array,key){
   var newArr = [];
    for(var i = 0; i < array.length; i++){
     if (array[i][key] != null){
       newArr.push(array[i]);
      }
    }
    return newArr;
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
   <br>
     With Filter:
     <select ng-model="a" ng-options="detail.name for detail in details | descFilter:'shortDescription'">
  </select>
    
  
  <br>
  Without any filter
  <select ng-model="d" ng-options="detail.name for detail in details track by detail.name">
  </select>
  <!-- -->
</div>

Answer 2

在 ngOptions 中，not null 检查是行不通的。相反，您可以创建自定义过滤器并使用它。

这是一个带有自定义过滤器功能的示例。 http://jsfiddle.net/ivankovachev/bue59Loj/

自定义过滤函数：

$scope.isDescriptionNull = function(item) {
            if (item.shortDescription === null) return false;

          return true;
        }

以及使用方法：

<select ng-model="a" ng-options="detail.name for detail in (details | filter:isDescriptionNull) track by detail.name">

Answer 3

问题是 filter:{shortDescription: ''} 只匹配原始对象而不匹配复杂对象，并且 shortDescription 在你的例子中是一个嵌套对象。
因此，而是像这样使用 filter:{shortDescription:{$:''}}：

  <select ng-model="a" 
          ng-options="detail.name for detail in details | filter:{shortDescription:{$:''}} track by detail.name">
  </select>

Answer 4

您的标记中有一个小错误。

筛选器希望获得对象属性、表达式或比较器。

官方文档：

{{ filter_expression | filter : expression : comparator : anyPropertyKey}}

所以，您所做的不是有效的过滤器

Answer 5

<select ng-model="a" 
          ng-options="detail.name for detail in details  | filter:{shortDescription:'!!'}} track by detail.name">
  </select>

Angularjs Select ng-options 中对象的过滤器不为空：

Angularjs filter not null for an object in Select ng-options:

angularjs

angularjs-filter