Question

我试图把一些视频，这个名字位于这个json文件中，在div里面，这是json文件：

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

这是剧本：

(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]);

}());

这是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>

问题是浏览器正在呈现这个：

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

而不是：

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

我认为过滤器没有被使用，因为函数“videoUrl”中的警报没有被触发，也没有“ng-src”或“src”属性被转换......有人可以告诉我发生了什么或做了什么我做错了？感谢

Answer 1

那是因为您错误地使用了过滤器表达式。您正在将其用作角度内置filterFilter的表达式。相反，您希望按原样使用过滤器，因为将其用作表达式，您需要修改原始数组（过滤器表达式函数中的第三个参数）。

相反改变：

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

到

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

执行： -

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

并且您的过滤器评估程序应该是

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

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

Plnkr with stub data

PS：因为这看起来更像是一个解析url的格式化过滤器，所以最好在控制器中使用它并更新视图模型本身的url，而不是放置DOM过滤器（过滤器在视图上）这会更贵。

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

1 个答案: