如何移除AngularJS下拉选择框中的空/Null选项？

你可以通过两种常用方式实现移除mail_notifications数组中value为空字符串的选项：

方式一：在控制器中过滤数组 #

在AngularJS控制器里对原数组进行过滤，生成不包含空值的新数组后再绑定到下拉框：

app.controller('YourController', function($scope) {
  // 原始mail_notifications数组
  $scope.mail_notifications = [
    {value: "", label: "空选项"},
    {value: "email1", label: "邮件1"},
    {value: "", label: "空选项2"},
    {value: "email2", label: "邮件2"}
  ];

  // 过滤出value不为空的项
  $scope.filteredNotifications = $scope.mail_notifications.filter(function(item) {
    return item.value.trim() !== "";
  });
});

模板中绑定过滤后的数组：

<select ng-model="selectedItem" ng-options="item.value as item.label for item in filteredNotifications">
</select>

方式二：在模板中使用内置过滤器 #

直接在ng-options中加入filter过滤器，实时过滤空值项：

<select ng-model="selectedItem" ng-options="item.value as item.label for item in mail_notifications | filter:{value: '!!'}">
</select>

filter:{value: '!!'}会筛选出value为真值的项，自动排除空字符串。

注意事项 #

• 如果value可能存在空格字符，过滤时建议加上trim()处理，避免空格被误判为有效内容。
• 控制器过滤性能更优，适合数据量大的场景；模板过滤更简洁，适合小型数组。

内容的提问来源于stack exchange，提问作者Maya