use*_*041 3 arrays angularjs angularjs-ng-repeat angularjs-filter
我试图把一些视频,这个名称位于这个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"属性被转换......有人可以告诉我发生了什么或者我做错了什么？谢谢
那是因为您错误地使用了过滤器表达式.您正在使用它作为角度内置的表达式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;
});
}
PS:因为这看起来更像是一个解析url的格式化过滤器,所以最好在控制器中使用它并更新视图模型本身的url而不是放置DOM过滤器(过滤器在视图上),这将更加昂贵.
| 归档时间： |
|
| 查看次数： |
13250 次 |
| 最近记录： |