如何使用AngularJS的ng-option过滤器在下拉框中仅显示长度为2的值？

嘿，我看到你尝试用AngularJS的ng-options过滤器来只展示NumberValue字符长度为2的选项，但你写的filter:{NumberValue.length:2}是行不通的——AngularJS的内置对象过滤器不支持直接通过这种嵌套属性/方法调用的方式来过滤哦。

给你两种可行的解决方案，选哪种都可以：

方法1：自定义复用性高的长度过滤器 #

如果这个长度过滤的逻辑以后还要用到，推荐定义一个自定义过滤器：

先在你的AngularJS模块里添加这个过滤器：

angular.module('yourAppModule').filter('lengthEquals', function() {
  return function(items, targetProp, requiredLength) {
    return items.filter(function(item) {
      // 先确保目标属性存在，转成字符串后再判断长度，避免报错
      const value = item[targetProp];
      return value && value.toString().length === requiredLength;
    });
  };
});

然后在模板里这样使用：

<select ng-options="item.NumberValue as item.Title for item in myLists.list1 | lengthEquals:'NumberValue':2">
</select>

方法2：直接用过滤函数（临时场景适用） #

如果只是这一处需要这个过滤逻辑，也可以直接在filter里传入一个控制器里定义的函数：

首先在控制器里添加过滤函数：

$scope.filterNumberLength = function(item) {
  // 同样做一下类型校验，防止undefined或数字类型的情况
  const numValue = item.NumberValue;
  return numValue && numValue.toString().length === 2;
};

然后模板里这样写：

<select ng-options="item.NumberValue as item.Title for item in myLists.list1 | filter:filterNumberLength">
</select>

简单解释下为什么你原来的写法失效：AngularJS的内置对象过滤器filter:{key:value}只能匹配对象的直接属性值，没办法解析像NumberValue.length这种动态计算出来的属性，所以必须用自定义过滤器或者过滤函数来实现这种基于派生属性的过滤逻辑。

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