使用$ index过滤和跟踪的angularjs ng-repeat不起作用 [英] angularjs ng-repeat with filter and track by $index not working
问题描述
im试图在div内放置一些名称位于此json文件中的视频，这是json文件:
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"
]
}
}
这是脚本:
(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>
问题在于浏览器正在呈现此内容:
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>
代替此:
<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"属性...有人可以告诉我发生了什么或做了什么我做错了吗?谢谢
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
推荐答案
那是因为您错误地使用了过滤器表达式.您将其用作角度内置filterFilter的表达式.相反，您想按原样使用过滤器，因为使用它作为表达式，您将需要修改原始数组(过滤器表达式函数中的第3个参数).
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).
改为更改:
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>
并且您的过滤器评估程序应该是
and your filter evaluator should be
var videoUrl=function(names){
if(!angular.isArray(names)){ return []; }
return names.map(function(name){
return "./videos/"+name;
});
}
PS:由于这似乎更像是解析URL的格式过滤器，所以最好在控制器中使用它并在视图模型本身中更新URL，而不是将DOM过滤器(在视图上放置)会更贵.
这篇关于使用$ index过滤和跟踪的angularjs ng-repeat不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
