Question

我正在使用以前建立的网站，并尝试在Jade模板中添加angular。我正在尝试使用一个简单的ng-repeat，但它总是被注释掉。我相信这与模板中的加载顺序有关，但是我找不到任何可靠的内容。有人知道吗？

bundles.jade

extends global_layout

block content
    script(src='/javascripts/ui-bootstrap-tpls-2.5.0.min.js')
    script(src='/javascripts/sliderApp.js')

style
    // CSS

    div(ng-app='sliderApp')
        div(ng-controller='sliderCtrl')
            div.slide(style='padding-top:3vh;')
                div.banner-titan.Grid.-left#banner1
                    div.Cell.-1of12
                    div.Cell.-6of12
                        h1(style='padding-left:16.666667%;') Find the best bundle for your patient
                        div(style='text-align:right; margin-top:12.5em;')
                            // input.btn.btn-link(style='text-decoration:underline;', value='See all bundles >>>')
                    div.Cell.-1of12
                    div.Cell.-2of12(style='padding-top:8.33em; text-align:center;')
                        div(uib-carousel, active='active', interval='5000', style='height:45vh; width:min-content; margin-bottom:8.33em;')
                            div(uib-slide, ng-repeat='image in product_image_list track by $index', index='$index')
                                img(src='/images/bundles/{{image.img_src}}', style='max-height:45vh;')
                                div.carousel-caption
                                    p test
                        input.btn-big.btn-primary.btn-cornered(type='button', value='Get Started', ng-click='')
            div.slide
                div.banner-prussian.Grid.-center#banner2(style='position:relative;')
                div.Cell.-10of12.question(id='{{slide.tile}}', style='absolute;', ng-repeat='slide in questionUrls track by $index')
                    div(style='width:100%; margin-top:4.1666667em; border-bottom:2px solid white; text-align:center; vertical-align:middle;')
                        h2(style='color:white; font-style:italic;') {{1 + displayedSlides.indexOf(slide.tile)}} <span style='font-family:neutratext-light !important;'>of</span>  {{displayedSlides.length}}
                        div(ng-include='slide.url')

slidderApp.js

var app = angular.module('myApp', ['ngAnimate', 'ui.bootstrap']);

app.controller('sliderCtrl', function ($scope, $location, $anchorScroll, $http) {
    // Other stuff

    $scope.product_images_list = [
        { name: "Corpus Ergo Backrest", img_src: "Corpus Back & Seat Cushion.jpg" },
        { name: "Permobil F3 Power Wheelchair", img_src: "F3.png" },
        { name: "ROHO Quadtro Select High Profile Seat Cushion", img_src: "ROHO Quadtro Select_HP.jpg" },
        { name: "ROHO Agility Max Contour Backrest", img_src: "AG6 Back Angled QR LG.jpg" },
        { name: "Comfort M2 Seat Cushion", img_src: "M2 Zero 1115.jpg" },
        { name: "ROHO Hybrid Elite Seat Cushion", img_src: "Hybrid Elite Dual Valve_No Bkgrd_No Cov.jpg" },
        { name: "Corpus Ergo Seat cushion", img_src: "Corpus Back & Seat Cushion.jpg" },
        { name: "Permobil M3 Power Wheelchair", img_src: "M3.png" },
        { name: "Permobil F5 VS Power Wheelchair", img_src: "F5VS.png" },
        { name: "Permobil M1 Power Wheelchair", img_src: "M1.png" },
        { name: "ROHO Agility Min Countour Backrest W/Air and Lumbar", img_src: "AG2 Back Angled LG.jpg" },
        { name: "Aero X", img_src: "Aero X.jpg" },
        { name: "Aero Z", img_src: "Aero Z.jpg" },
        { name: "Aero T", img_src: "Aero T.jpg" }

    ];
});

从开发控制台输出

Answer 1

当对象为空或不可访问或未定义时，div将被注释。

在您的情况下，在控制器中，您已将对象名称用作“ product_images_list”，而在ng-repeat中，您已在使用“ product_image_list”

所以您在这里拼错了对象，这就是为什么它被注释的原因。

您需要做的就是将ng-repeat中的对象名称更改为“ product_images_list”。

希望这可以解决您的问题。

Ng-repeat在玉模板中被注释掉

1 个答案: