Question

我在阅读完这篇文章之后试图写一个过滤器：custom angular filter

起初它看起来很简单，但我遇到了这个问题。

我想通过检测类型并在选择选项值中显示已排序列表来对对象数组进行排序。

您可以在此处查看不同的数组对象和我的代码：jsfiddle。

年龄的值可以是以下类型：

1）数字

$scope.userDetails = [
    {"id":"1","name":"Name1","age":"20"},{"id":"2","name":"Name2","age":"5"},
    {"id":"5","name":"Name3","age":"15"},{"id":"4","name":"Name4", "age":"1"},
    {"id":"3","name":"Name5","age":"101"},{"id":"6","name":"Name6", "age":"51"},
];

2）字符串

$scope.userDetails = [
    {"id":"1","name":"Name1","age":"ten"},{"id":"2","name":"Name2","age":"hundred"},
    {"id":"4","name":"Name3","age":"six"},{"id":"6","name":"Name4", "age":"one"},
    {"id":"5","name":"Name5","age":"seven"},{"id":"3","name":"Name6", "age":"hundred and one"},
];

3）两者（包括字符串和数字类型）

$scope.userDetails = [
    {"id":"3","name":"Name1","age":"20"},{"id":"1","name":"Name2","age":"hundred"},
    {"id":"5","name":"Name3","age":"six"},{"id":"2","name":"Name4", "age":"1"},
    {"id":"6","name":"Name5","age":"seven"},{"id":"4","name":"Name6", "age":"hundred and one"},
];

如果不同的年龄值只是数字类型，我希望有一个按数字排序的选项，如果不是，那么我想按字符串排序。

谢谢

编辑：1
我想我的问题可能会让你们中的一些人感到困惑。我会在这里尝试解释一下这一点对于（1）案件：
我们只有年龄 [“20”，“5”，“15”，“1”，“101”，“51”] 的整数值（仅显示每个对象的年龄值）。现在，当我应用过滤器进行排序时，它应该比较整数比较和输出应该是 - [“1”，“5”，“15”，“20”，“51”，“101”] （所以我认为我们必须在过滤器中使用regex或parseInt将它们转换为数字并进行比较，但输出应该仍然是字符串。）
输入字符串，输出字符串，比较整数

（2）案例：
我们只有年龄 [“十”，“百”，“六”，“一”，“七”，“一百一”] 的整数值（仅显示每个对象的年龄值））。现在，当我应用过滤器进行排序时，它应该比较像String比较和输出应该是 - [“百”，“一百”，“一”，“七”，“六”，“十”] < / strong>
输入字符串，输出字符串，比较字符串

（3）案例：
我们只有年龄 [“20”，“百”，“六”，“1”，“七”，“一百一”] 的整数和字符串值（仅显示年龄值每个对象）。现在当我应用过滤器进行排序时，它应该比较像String比较和输出应该是 - [“1”，“20”，“百”，“一百”，“七”，“六”] < / strong>
输入字符串，输出字符串，比较字符串

谢谢，

Answer 1

Angular已经有了一个用于排序的过滤器。我建议你不要自己尝试重写排序过滤器，而是编写一个过滤器，将你的年龄道具从字符串转换为int ONLY ，如果所有年龄值都可以转换为整数。注意我使用的是.map()和.some()，它们是ES5函数（如果您支持IE8，则需要添加填充程序）。

yourModule.filter('tryToConvertAge2Int', ['$filter', function ($filter) {
   // Return filter function
   return function (items) {
      // Check if some age values cannot be converted to integers.
      var notAllIntegers = items
         .some(function (item) {
            return isNan(parseInt(item.age));
         });
      // Return list of items with age props as integers
      // if all values can be converted to integers.
      if (!notAllIntegers) {
         return items.map(function (item) {
            item.age = parseInt(age);
            return item;
         });
      }
      // Otherwise return original items.
      return items;
   };
});

然后简单地将tryToConvertAge2Int和orderBy链接在一起：

<div ng-repeat="item in items | tryToConvertAge2Int | orderBy:'+age' track by id"></div>

使用角度过滤器通过检测类型对对象进行排序

1 个答案: