Angularjs 过滤器在选择 ng-options 中的对象不为空：答案

【问题标题】：Angularjs filter not null for an object in Select ng-options:Angularjs 过滤器在选择 ng-options 中的对象不为空：
【发布时间】：2016-11-17 01:22:42
【问题描述】：

我正在尝试过滤掉 Angular 1.5.6 中的对象而不是 null 的项目。

我尝试了post 中的所有选项。

仍然无法使其工作。

select 中应仅显示“Sally”

这里是fiddle

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);

【问题讨论】：

标签： angularjs angularjs-filter

【解决方案1】：

请运行此 sn-p 以实现您的目标

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>

【讨论】：

谢谢。你的回答确实有效。但这意味着在内部创建一个新数组和另一个过滤器函数。我正在寻找类似 DAXholic 提供的基本功能。

【解决方案2】：

在 ngOptions 中，非空检查被认为是行不通的。相反，您可以创建一个自定义过滤器并使用它。

这是一个带有自定义过滤器功能的示例。 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">

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

过滤器期望获取对象属性、表达式或比较器。

官方文档：

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

所以，你所做的不是一个有效的过滤器

【讨论】：

【解决方案5】：

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

【讨论】：