angularjs ng-repeat 与过滤器和跟踪 $index 不起作用 [英] angularjs ng-repeat with filter and track by $index not working
问题描述
我正在尝试将一些视频，其名称位于此 json 文件中，放在 div 中，这是 json 文件:
<代码>{视频":{姓名": ["dfg.webm",fdgh.mp4"]}}这是脚本:
(function(){var app=angular.module("index",[]);var videoUrl=function(name){警报(asd")；返回./videos/"+名称；};app.filter('videoUrl',function(){alert("asd");return videoUrl;});var mainController=function($scope,$http){var 视频成功 = 函数(响应){$scope.videosJSON=response.data;};var 视频错误=函数(响应){}；$http({方法:'获取'，网址:http://192.168.1.66/videos.json"，}).then(videosSuccess,videosError);};app.controller("mainController",["$scope","$http",mainController]);}());这是html:
<头>...<body ng-controller="mainController"><div id="videosdiv"><video ng-repeat="videosJSON.videos.name | filter:videoUrl track by $index" preload="metadata" ng-src="{{video}}" type="video/webm"></视频></html>
问题在于浏览器正在呈现这个:
<video data-ng-repeat="videosJSON.videos.name | filter:videoUrl track by $index" preload="metadata" ng-src="dfg.webm" type="video/webm" class="ng-scope" src="dfg.webm"></视频><video data-ng-repeat="videosJSON.videos.name 中的视频 | filter:videoUrl track by $index" preload="metadata" ng-src="fdgh.mp4" type="video/webm" class="ng-scope" src="fdgh.mp4"></视频>而不是这个:
<video ng-repeat="videosJSON.videos.name track by $index" preload="metadata" ng-src="./videos/dfg.webm" type="video/webm" class="ng-scope" src="./videos/dfg.webm"></视频><video ng-repeat="videosJSON.videos.name track by $index" controls="" preload="metadata" ng-src="./videos/fdgh.mp4" type="video/webm" class="ng-scope" src="./videos/fdgh.mp4"></视频>我认为过滤器没有被使用，因为函数videoUrl"内的警报没有被触发，也没有转换ng-src"或src"属性......有人可以告诉我发生了什么或做了什么我做错了吗?谢谢
那是因为你错误地使用了过滤器表达式.您将其用作 angular 内置 filterFilter 的表达式.相反，您希望按原样使用过滤器，因为将其用作表达式您需要修改原始数组(过滤器表达式函数中的第三个参数).
改为:
ng-repeat="videosJSON.videos.name 中的视频 | filter:videoUrl到
ng-repeat="videosJSON.videos.name 中的视频 | videoUrl做:-
<video ng-repeat="videosJSON.videos.name | videoUrl track by $index" preload="metadata" ng-src="{{video}}" type="video/webm></视频>你的过滤器评估器应该是
var videoUrl=function(names){if(!angular.isArray(names)){ return [];}返回名称.map(函数(名称){返回./videos/"+名称；});}PS:由于这看起来更像是解析 url 的格式过滤器，因此最好在控制器中使用它并更新视图模型本身中的 url，而不是放置 DOM 过滤器(视图上的过滤器)哪个会更贵.
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
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;
});
}
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.
这篇关于angularjs ng-repeat 与过滤器和跟踪 $index 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
