angularjs ng-repeat with filter and track by $index not working

im trying to put some videos, which name is located in this json file, inside a div, this is the json file:

我想放一些视频，它的名字在json文件中，在div中，这是json文件

{
    "videos": {
        "name": [
            "dfg.webm",
            "fdgh.mp4"
        ]
    }
}

this is the script:

这是脚本:

(function(){
    var app=angular.module("index",[]);

    var videoUrl=function(name){
        alert("asd");
        return "./videos/"+name;
    };  
    app.filter('videoUrl',function(){alert("asd");return videoUrl;});

    var mainController=function($scope,$http){
       var videosSuccess=function(response){
           $scope.videosJSON=response.data;         
       };
       var videosError=function(response){};
       $http({
           method: 'GET',
           url: "http://192.168.1.66/videos.json",
       }).then(videosSuccess,videosError);
    };
    app.controller("mainController",["$scope","$http",mainController]);

}());

and this is the html:

这是html

<html lang="es" ng-app="index">
    <head>
    ...
    </head>
    <body ng-controller="mainController">
        <div id="videosdiv">
            <video ng-repeat="video in videosJSON.videos.name | filter:videoUrl track by $index" preload="metadata" ng-src="{{video}}" type="video/webm">      
            </video>
        </div>

    </body>
</html>

the problem is that the browser is rendering this:

问题是浏览器呈现的是:

<video data-ng-repeat="video in videosJSON.videos.name | filter:videoUrl track by $index" preload="metadata" ng-src="dfg.webm" type="video/webm" class="ng-scope" src="dfg.webm">
</video>
<video data-ng-repeat="video in videosJSON.videos.name | filter:videoUrl track by $index" preload="metadata" ng-src="fdgh.mp4" type="video/webm" class="ng-scope" src="fdgh.mp4">      
</video>

instead of this:

而不是:

<video ng-repeat="video in videosJSON.videos.name track by $index" preload="metadata" ng-src="./videos/dfg.webm" type="video/webm" class="ng-scope" src="./videos/dfg.webm">      
</video>
<video ng-repeat="video in videosJSON.videos.name track by $index" controls="" preload="metadata" ng-src="./videos/fdgh.mp4" type="video/webm" class="ng-scope" src="./videos/fdgh.mp4">      
</video>

i think that the filter is not being used since the alert inside the function "videoUrl" is not triggered nor the "ng-src" or "src" properties are transformed... can somebody tellme what is happening or what did i do wrong? thanks

我认为这个过滤器没有被使用，因为函数“videoUrl”中的警告没有被触发，“ng-src”或者“src”属性也没有被转换…有人能告诉我发生了什么吗?我做错了什么?谢谢

1 个解决方案

#1

That is because you are using the filter expression wrongly. You are using it as expression for angular built-in filterFilter. Instead you want to use your filter as is, because using it as expression you would need to modify the original array (3rd argument in the filter expression function).

这是因为您错误地使用了过滤器表达式。您正在使用它作为角内置滤光器的表达式。相反，您希望按原样使用筛选器，因为使用它作为表达式，您需要修改原始数组(筛选器表达式函数中的第3个参数)。

Instead change:

而不是改变:

 ng-repeat="video in videosJSON.videos.name | filter:videoUrl

来

 ng-repeat="video in videosJSON.videos.name | videoUrl

Do:-

做:

   <video ng-repeat="video in videosJSON.videos.name | videoUrl track by $index" preload="metadata" ng-src="{{video}}" type="video/webm">      
   </video>

and your filter evaluator should be

你的过滤器评估程序应该是

var videoUrl=function(names){
    if(!angular.isArray(names)){ return []; }

    return names.map(function(name){
        return "./videos/"+name;
    });  
}

Plnkr with stub data

Plnkr存根数据

PS: Since this seems more like a formatting filter that resolves the url it is better to use it in the controller and update the url in the view model itself rather than placing the DOM filter(filter on the view) which will be more expensive.

PS:由于这看起来更像是一个格式化过滤器，它可以解析url，所以最好在控制器中使用它，并在视图模型中更新url，而不是在视图中放置DOM过滤器(过滤器)，这样会更昂贵。

#1