Question

我试图过滤掉＆＃34; null＆＃34;选择下拉列表的结果。到目前为止，我只使用常规html <select> + <option>和ng-repeat，并以这种方式排除null结果：

<option ng-repeat="person in showCase.persons" ng-if="person.profiles">
{{person.profiles}}
</option>

这样我就可以获得一个没有空/ null＆＃39;用户个人资料＆＃39;的列表。现在我开始使用ng-options，因为列表包含带对象的数组，但我无法获得空结果 - ..当我使用ng-if时，整个<select>消失了：

<select ng-model="profile_filter" ng-options="person.profiles for person in persons"  
ng-if="person.profiles">
</select>

我的优先事项是内联而不是我的控制器，因为页面中有很多<select>个对象，有些确实需要＆＃34; null＆＃34;结果显示。我知道，这是一个非常基本的问题，但仍然让我在最后2个小时内陷入困境。感谢。

Answer 1

当您在选择中使用ng-if时，它会在选择中查找范围person.profiles上不存在的属性。 person.profiles for person in persons仅仅是ng-options的表达。

您可以在绑定之前从控制器本身过滤掉空值。或者创建一个过滤器，或者只使用现有角度核心filter的过滤器表达式。

实施例： -

在你的控制器中定义一个关于范围的函数，如果配置文件是假的，你可以删除它（你可以根据需要使它显式），如果你返回truthy，那么该项将被添加为选项，否则它将被忽略：

$scope.removeNull = function(itm) {
    return itm.profiles;
  }

只需在视图中使用它： -

<select ng-model="profile_filter"
    ng-options="person.profiles for person in persons|filter:removeNull">

＆＃13;

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.persons = [{
    profiles: null
  }, {
    profiles: "prf1"
  }, {
    profiles: "prf2"
  }, {
    profiles: "prf3"
  }, {
    profiles: null
  }, {
    profiles: "prf4"
  }]

  $scope.removeNull = function(itm) {
    return itm.profiles;
  }
  $scope.profile_filter = $scope.persons[1];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <select ng-model="profile_filter" ng-options="person.profiles for person in persons|filter:removeNull">
  </select>
  {{profile_filter}}
</div>

＆＃13;

Answer 2

尝试使用ng-if="person.profiles!=null"获取布尔值。

在ng-options中使用ng-if来过滤空结果

2 个答案: