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

Question

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? 我认为过滤器没有被使用，因为函数“videoUrl”内的警报没有被触发，也没有“ng-src”或“src”属性被转换......有人可以告诉我发生了什么或我做错了什么？ thanks 谢谢

Answer 1

That is because you are using the filter expression wrongly. 那是因为您错误地使用了过滤器表达式。 You are using it as expression for angular built-in filterFilter . 您正在将其用作角度内置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). 相反，您希望按原样使用过滤器，因为将其用作表达式，您需要修改原始数组（过滤器表达式函数中的第三个参数）。

Instead change: 而是改变：

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

to 至

 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过滤器（过滤器在视图上）。

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

问题描述

1 个解决方案

解决方案1
6 已采纳 2015-01-04 04:38:09

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

问题描述

1 个解决方案

解决方案1 6 已采纳 2015-01-04 04:38:09

解决方案1
6 已采纳 2015-01-04 04:38:09