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:

{
    "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 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

PSL · Accepted Answer · 2015-01-04 05:13:58Z

6

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).

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

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.

edited Jan 4, 2015 at 5:13

answered Jan 4, 2015 at 4:38

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3152041 Over a year ago

i tried that and now i get 26 videos with a "src" parameter that has no sense and a lot of alerts, this is a screenshot of the resulting html in chrome vvcap.net/db/xJ5yMmKXFE6KzmzgTfZU.htp

PSL Over a year ago

Check my demo... Your filter is also incorrect. See my answer. Click on Plnkr with stub data in my answer.

user3152041 Over a year ago

yes it worked thanks!! the filter was wrong, what i don't understand is why the filter is receiving non array values that cause this error if the "if(!angular.isArray(names)){ return []; }" line is commented: vvcap.net/db/yBtWSEa1lDiMSEI6JFoi.htp

PSL Over a year ago

@user3152041 That is why that line is there. See my last comment in my answer as well :). filters run twice atleast during digest cycle you will see it running before you asyncronously set the data in which case it will be undefined and hence the check.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related