angularjs NG重复使用过滤器和跟踪通过工作不

我尝试把一些视频，就设在这个JSON文件，该文件名，一个div里面$指数，这是JSON文件：angularjs NG重复使用过滤器和跟踪通过工作不

{ 
    "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”属性被改变...有人可以告诉我发生了什么，或者我做错了什么？谢谢

来源

2015-01-04 user3152041

这是因为您错误地使用了过滤器表达式。您正在使用它作为角度内置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过滤器（过滤器查看）这将会更加昂贵。

来源

2015-01-04 04:38:09 PSL

我试过了，现在我得到了26个带有“src”参数的视频，它没有任何意义和很多警报，这是在chrome中生成的html的屏幕截图http://vvcap.net/db/xJ5yMmKXFE6KzmzgTfZU .htp – user3152041

查看我的演示...您的过滤器也不正确。看到我的答案。在我的答案中点击带存根数据的Plnkr。 – PSL

是的，它工作的感谢！过滤器是错误的，我不明白为什么过滤器接收非数组值，如果“if（！angular.isArray（names））{return [];}”行被注释：http： //vvcap.net/db/yBtWSEa1lDiMSEI6JFoi.htp – user3152041

angularjs NG重复使用过滤器和跟踪通过工作不

回答

相关问题