为什么我的ng-repeat循环遍历我的对象的空实例?

时间:2014-05-02 13:05:37

标签: javascript angularjs

我有一个ng-repeat循环遍历一个包含三个项目的对象:

在chrome中,每次我获得此文件的404时: %7B%7Bfinalist.slug%7D%7D-small.jpg

这是ng-repeat中的文件(下面的模板)

在Internet Explorer 8中,它甚至显示为没有任何内容的项目。

<div ng-repeat="finalist in finalists" ng-class="{faded: !enabled(finalist.url)}" class="bar">
         <div class="link">
                <p><a href="/{{finalist.slug}}.php" ng-bind-html="finalist.htmlname | unsafe"></a></p>
                <a href="/{{finalist.slug}}.php"><img src="/img/{{finalist.slug}}-small.jpg" /></a>
                <p class="after"> <a href="/{{finalist.slug}}.php">Plus d&rsquo;infos</a></p>
        </div>
        <div class="like">
                <p ng-hide="totalLikes === 0"class="percentage">{{finalist.likes/totalLikes*100 | number:0}}% des votes</p>
                        <div ng-show="enabled(finalist.url)">
                                <!--layout="box_count"-->
                                <fb:like href="{{finalist.url}}" send="false" share="false" action="like" layout="button" width="100" show_faces="false" share="false"></fb:like>


</div>
    </div>

$ scope.finalists是一个包含三个项目,一个长度属性和一个 proto 的数组,是不是它们中的任何一个都让它表现奇怪?

我正在使用角度1.2.11。

这就是我获取scope.finalists(来自服务)的方式:

$scope.finalists = finalists.get();

这是服务:

service('finalists', function(){

    var finalists = 
    [
        {
            name: 'Le Bal des Cocktails',
            htmlname: 'Le Bal des Cocktails',

            slug: 'baldescocktails',
            height: 1598,
            intro: 'Une nouvelle expérience de dégustation imaginée par le finaliste Anatole Zangs. Une découverte unique du whisky Ballantine’s à travers de mini-cocktails, de mini-verres de whiskies accompagnés de bouchées gourmandes, le tout défilant sur un bar à plate-forme tournante. Le bar à Sushi revisité pour découvrir le whisky !',
            about: '<p>Tel un maître de cérémonie et sans qu’il y ait de menu, le barman, inspiré par les saveurs des whiskies Ballantine’s, annonce ses créations et bouchées créatives qu’il envoie sur les rails.</p><p>Un ballet gracieux et coloré de mini-cocktails, mini-bouchées, mini-verres de dégustation de whisky Ballantine’s, défilera sous vos yeux : une farandole de saveurs qui ravira à la fois novices et amateurs de whisky ! Toutes les créations seront uniques, imaginées pour l’occasion et composées de produits rares et frais. A vous de faire votre choix sur le plateau tournant et d’aller de découverte en découverte.</p><p>Dégustez les créations dans une ambiance feutrée. Un mur de bouteilles et le bar retro-éclairé habilleront la pièce de couleurs douces.</p><p>Entrez dans ce nouvel espace éphémère en plein cœur de Paris au premier étage du Chacha Club.</p>',
            bio: '<p>Avant d\'être danseur professionnel, Anatole était un petit rat de l\'Opéra. À la sortie de cette formation prestigieuse, il a pu voyager grâce à des engagements dans différentes compagnies à l’étranger tel que les ballets de Zurich, Rome et Varsovie.</p><p>Depuis peu, Anatole s\'est découvert d\'autres passions comme l\'illustration, la sérigraphie ou encore la fabrication artisanale de bière au sein du collectif des Hydropathes sur Paris.</p>',
            quote: '<p>\“Le Bal des Cocktails est une invitation à la découverte, on est en interaction directe avec les créations du barman via un mécanisme de service inhabituel.</p><p>On déguste, on découvre de nouvelles saveurs, c’est comme être autour d\'un chef japonais qui fait habilement virevolter ses couteaux.\”</p>',
            mentor: 'Laura Léonard',
            entrpreneur: 'Anatole Zangs'
        },
        {
            name: 'L’Epicerie',
            htmlname: 'L&rsquo;Epicerie',
            entrepreneur: 'Abdou El Asfar',
            height: 1775,
            slug: 'epicerie',
            intro: '<p>Pour la première fois en France, faites votre marché pour réaliser votre cocktail !</p><p>Choisissez vous-même les fruits, légumes ou épices dans notre Epicerie, puis confiez-les à nos barmen mixologues qui transformeront votre panier en un délicieux cocktail à base de whisky Ballantine’s, et révèleront des saveurs insolites.</p>',
            about: '<p>Marre des bars classiques et des cocktails sans saveur ? L’Epicerie va vous faire changer d’avis ! Ici pas de jus artificiels, seuls des fruits et légumes, fraîchement mixés composent votre cocktail à base de whisky Ballantine’s créé sous vos yeux.</p><p>C’est dans l’épicerie familiale d’Edinburgh que George Ballantine’s créait son célèbre whisky en 1827. Et c’est dans notre bar-épicerie que vous pourrez le déguster aujourd’hui ! Venez arpenter les étalages muni d’un panier, sélectionnez vos ingrédients (fruits, légumes, épices, herbes). Confiez-les ensuite à l’un de nos barmen qui les associera au whisky Ballantine’s le plus adapté et vous concoctera votre cocktail en « live ».</p><p>Enfin, dégustez votre propre création dans une atmosphère qui éveille vos papilles, entouré de plantes, de pots d’épices, paniers de fruits, bouquets d’herbes…</p><p>Fini les cocktails « boring » ! Dans L’Epicerie, des suggestions innovantes sont affichées pour vous conseiller dans la sélection de vos ingrédients, du whisky le plus adapté et nos spécialistes pourront vous guider.</p><p>Saviez-vous, par exemple, que le radis se marie à merveille avec le litchi, et que le basilic sublime le goût de la fraise, ou encore que l’ananas se révèle doux et subtil associé à la coriandre ?</p><p>Venez vite inventer de nouvelles saveurs et découvrir des cocktails hors du commun à l’aide de nos experts !</p>',
            bio: '<p>Chef Barman d’établissements prestigieux, Abdou est sacré Meilleur Barman du Maroc 2012 et arrive en France en 2013 pour continuer de pratiquer sa passion en hôtel de luxe ou lors de soirées privées.</p><p>Inspiré par la cuisine marocaine, Abdou injecte des épices, fruits et légumes originaux dans chacune de ses créations. Il ose l’originalité pour offrir à ces clients une expérience unique. Véritable entrepreneur, il aspire à ouvrir son propre bar à cocktail !</p>',
            quote: '<p>\“Un concept original et totalement inédit !</p><p>L’Epicerie permettra d\'imaginer les cocktails les plus intrigants (à la figue, aux épices...) préparés par des experts en mixologie.</p><p>Tout ceci dans une ambiance conviviale et décontractée, comme dans son marché préféré !\”</p>',
            mentor: 'Simon Baldeyrou'
        },
        {
            name: 'Le Charlatan',
            htmlname: 'Le Charlatan',
            slug: 'charlatan',
            height: 1517,
            entrepreneur: 'Laura Inguenaud',
            intro: '1827 STOP 1920 STOP 2567 STOP. Un bar, 3 atmosphères à travers le temps.',
            about: '<p>Un bar, 3 époques, un guide : George Ballantine.</p><p>Entrez par une porte dérobée à travers la bibliothèque de George en 1827, année où il commença à proposer une gamme de scotch whiskies soigneusement sélectionnés.</p><p>Découvrez un premier bar dans une cave des années 20 où vous pourrez déguster les cocktails mythiques de cette époque dont le fameux Collin’s revisité par Ballantine’s.</p><p>Traversez 650 années pour entrer dans un 2ème bar : un bar futuriste et avant-gardiste sorti de l’année 2567 où vous expérimenterez ces mêmes cocktails mythiques remis aux goûts du jour du 26ème siècle </p><p>Venez vivre au Charlatan, une expérience unique à la découverte des whiskies Ballantine’s époque après époque.</p>',
            bio: '<p>Globetrotteuse, amatrice de Whisky et de cuisine moléculaire, Laura que ses amis surnomme Val’, a voyagé dans plus de 25 pays, desquels elle a rapporté, dans ses carnets de voyages, des recettes de cocktails et des méthodes de travail du Whisky à faire pâlir plus d’un bartender…</p><p>Laura trouvera toujours le temps, entre deux virées à bord de sa bécane, de vous concocter un breuvage entre cuisine moléculaire et  mixologie !</p>',
            quote: '<p>\“Traverser les époques de 1827 à  2567, c\'est ce que propose l\'audacieux projet Le Charlatan. A tous les curieux qui rêvent de savoir à quoi ressemblera le cocktail du futur: ce concept vous permettra de découvrir les whiskies Ballantine’s à travers le temps, l’espace et les saveurs\”</p>',
            mentor: 'Hirmane Abdoulhakime'
        },
    ]
    finalists.forEach(function(finalist){
        finalist.url = 'https://ballentines.herokuapp.com/?name='+finalist.slug;
        finalist.realUrl = 'https://ballentines.herokuapp.com/'+finalist.slug+'.php';
    });
    function shuffle(array) {
      var currentIndex = array.length
        , temporaryValue
        , randomIndex
        ;

      // While there remain elements to shuffle...
      while (0 !== currentIndex) {

        // Pick a remaining element...
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex -= 1;

        // And swap it with the current element.
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

      return array;
    }
    finalists = shuffle(finalists)

    return{
        get: function(){
            return finalists;
        },
        getIndex: function(key, value)
        {
            var theIndex;
            finalists.forEach(function(finalist, index)
            {
                if(finalist[key] === value){
                    theIndex = index
                    return
                }
            })
            return theIndex;
        },
        addValue: function(index, key, value){
            finalists[index][key] = value
        }
    }

}).

1 个答案:

答案 0 :(得分:1)

尝试使用 ng-src 而不是src。 href尝试使用 ng-href

请点击此处查看更多解释:https://docs.angularjs.org/api/ng/directive/ngSrc