Question

在AngularJS中，我有一个对象数组。我想显示为第一个字母过滤的数据。我使用以下方式。的 HTML ：

<p ng-repeat="film in filmList | startsWith:'C':'title'">{{film.title}}</p>

JS ：

.filter('startsWith', () => {
    return (items: any, prefix: any, itemProperty: any) => {
        if (items && items.length) {
            return items.filter((item: any) => {
                var findIn = itemProperty ? item[itemProperty] : item;
                return findIn.toString().indexOf(prefix) === 0;
            });
        }
    };
});`

它有效。但现在我的目标是根据两个选择过滤（总是为第一个字母）。例如，过滤标题为＆＃39; B＆＃39;或者＆＃39; C＆＃39;。

我已经编写了以下代码，但它不起作用：

HTML ：

 <p ng-repeat="film in filmList | startsWith:'[B, C]':'title'">{{film.title}}</p>

JS ：

.filter('startsWith', () => {
    return (items: any, prefixes: any, itemProperty: any) => {
        if (items && items.length) {
        return items.filter((item: any) => {
            var findIn = itemProperty ? item[itemProperty] : item;
            for(let i = 0; i < prefixes.length; i++){
                return findIn.toString().indexOf(prefixes[i]) === 0;
            }
        });
    }
    };
 });

Answer 1

如果您需要更简单的东西而无需额外的过滤器指令：

var app = angular.module("MyApp", []).controller("MyCtrl", function($scope) {

  $scope.filmList = [{
    title: "Batman"
  }, {
    title: "CastAway"
  }, {
    title: "GodFather"
  }];

  $scope.customfilter = function(film) {
    return film.title.charAt(0) === 'B' || film.title.charAt(0) === 'C';
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyApp" ng-controller="MyCtrl">
  <p ng-repeat="film in filmList | filter: customfilter">{{film.title}}</p>
</body>

Answer 2

参数'[B, C]'将被识别为字符串而不是数组。你应该在控制器中定义数组并对其进行转换。

<强> UPD：

在return中调用for-loop时，循环将中断。我做了一些改变以避免这种情况。

参考下面的代码段（已更新）。

＆＃13;

var app = angular.module("app", [])
app.controller("myCtrl", function($scope) {
  $scope.filmList = [{
      title: 'Black'
    },
    {
      title: 'Brown'
    },
    {
      title: 'Clown'
    },
    {
      title: 'Red'
    },
    {
      title: 'Gray'
    }
  ];
  $scope.option = ['B', 'C'];
})
app.filter('startsWith', () => {
  return (items, prefixes, itemProperty) => {
    if (items && items.length) {
      return items.filter((item) => {
        var findIn = itemProperty ? item[itemProperty] : item;
        
        for (let i = 0; i < prefixes.length; i++) {
          if (findIn.toString().indexOf(prefixes[i]) === 0) {
            return true;
          }
        }
      });
    }
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <p ng-repeat="film in filmList | startsWith:option:'title'">{{film.title}}</p>
</div>

＆＃13;

根据第一个字母过滤ng-repeat

2 个答案: