javascript - 无法插入将 $scope 变量传递到 Angular 过滤器时出现的错误

Question

我有一个 Angular 过滤器，它通过检查 id 是否存在于数组中来将用户 id 转换为用户图像 url，并返回相应的图像 url，该数组与过滤器一起传递。

过滤器正在工作，ng-repeat 列表显示了正确的图像 url，但我的控制台中有 2 个错误。 第一个错误位于第 4 行，第二个错误位于 ionic.bundle.js:13380:32

错误:

Error: undefined is not an object (evaluating 'members.length')
Error: [$interpolate:interr] Can't interpolate: {{ participant.athlete_id | idToImage : clubMembers }} TypeError: undefined is not an object (evaluating 'members.length')

HTML:

<div ng-repeat="participant in participants | filter:{ event_id: event.id }: true track by $index">
    <img ng-src="{{ participant.athlete_id | idToImage : clubMembers }}">
</div>

Angular 过滤器:

1 app.filter('idToImage', function () {
2   return function (id, members) {
3       var curMember = id;
4        var len = members.length - 1;
5        while(len >= 0){
6           if(curMember >= members[len].id){
7               return members[len].profile;
8           }
9           len--;
10        }
11     };
12 });

clubMemers 在 {{ attendee.athlete_id | idToImage :clubMembers }} 是一个数组，如下例所示，是从外部源检索的:

$scope. clubMembers = [
   {"id":1234,"profile":"https://domain.net/pictures/1.jpg"},
   {"id":12345,"profile":"https://domain.net/pictures/3.jpg"},
   {"id":12346,"profile":"https://domain.net/pictures/4.jpg"}
]

Answer 1

我认为当 members 为空时，您的过滤器不会处理该条件，因为当您不处理它时，members.length 将被搞乱并且代码执行将在此时停止。

过滤

app.filter('idToImage', function () {
   return function (id, members) {
       if(!members) return; //return nothing in this case
       var curMember = id;
        var len = members.length - 1; //checking above if before processing members
        while(len >= 0){
           if(curMember >= members[len].id){
               return members[len].profile;
           }
           len--;
        }
    }
});