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

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與存根數據

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