angularjs ng-repeat avec filtre et de la piste par $index ne fonctionne pas

im essayant de mettre quelques vidéos, dont le nom se trouve dans ce fichier json, à l'intérieur d'un div, c'est le fichier json:

{
    "videos": {
        "name": [
            "dfg.webm",
            "fdgh.mp4"
        ]
    }
}

c'est le 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]);

}());

et c'est le 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>

le problème est que le navigateur est rendu ce:

<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>

au lieu de cela:

<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>

je pense que le filtre n'est pas utilisé depuis l'alerte à l'intérieur de la fonction "videoUrl" n'est pas déclenché, ni le "ng-src" ou "src" propriétés sont transformés... quelqu'un peut-il tellme ce qui se passe ou qu'ai-je fait de mal? grâce

InformationsquelleAutor user3152041 | 2015-01-04
  1. 6

    C'est parce que vous êtes à l'aide de l'expression de filtre à tort. Vous l'utilisez comme expression angulaire intégré filterFilter. Au lieu de cela vous voulez utiliser votre filtre est, parce qu'en l'utilisant comme expression que vous auriez besoin de modifier le tableau d'origine (3ème argument dans l'expression de filtre de fonction).

    Plutôt changer:

     ng-repeat="video in videosJSON.videos.name | filter:videoUrl

    à

     ng-repeat="video in videosJSON.videos.name | videoUrl

    Faire:-

       <video ng-repeat="video in videosJSON.videos.name | videoUrl track by $index" preload="metadata" ng-src="{{video}}" type="video/webm">      
   </video>

    et votre filtre évaluateur devrait être

    var videoUrl=function(names){
    if(!angular.isArray(names)){ return []; }

    return names.map(function(name){
        return "./videos/"+name;
    });  
}

    Plnkr avec talon de données

    PS: Depuis ce qui semble de plus en plus comme un filtre de mise en forme qui résout l'adresse url, il est préférable de l'utiliser dans le contrôleur et la mise à jour de l'url dans le modèle de vue lui-même plutôt que de placer les DOM(filtre sur le point de vue) qui sera plus cher.

    • j'ai essayé et maintenant je reçois 26 vidéos avec un "src" paramètre qui n'a pas de sens et beaucoup d'alertes, c'est une capture d'écran du résultat de l'html dans le navigateur chrome vvcap.net/db/xJ5yMmKXFE6KzmzgTfZU.htp
    • Vérifier mon démo... Votre filtre est également incorrect. Voir ma réponse. Cliquez sur Plnkr with stub data dans ma réponse.
    • oui, il a travaillé merci!! le filtre est mal, ce que je ne comprends pas, c'est pourquoi le filtre est non recevoir de la matrice de valeurs à l'origine de cette erreur si le "if(!angulaire.isArray(nom)){ return []; }" de la ligne est commentée: vvcap.net/db/yBtWSEa1lDiMSEI6JFoi.htp
    • C'est pourquoi cette ligne est là. Voir mon dernier commentaire dans ma réponse ainsi :). les filtres exécuter deux fois au moins au cours de digérer cycle, vous verrez qu'il fonctionne avant de vous asyncronously définir les données, auquel cas, il ne sera pas défini et donc de la vérifier.
    InformationsquelleAutor PSL