2015-10-01 68 views
-2

我在後端有一個汽車陣列,其長度是用戶定義的。因此,如果用戶選擇3輛汽車,陣列中將有3個元素。我想在列表中的html元素中顯示汽車的某些方面。該數組是基於JavaScript的。基於陣列長度的html列表元素

有得這種效果:

<ul class="cars"> 
    <li> 
     <img src=car[0].imageUrl> 
     <h3>#{car[0].name}</h3> 
     <span id="brand">#{car[0].brand}</span> 
     <p>#{car[0].desc}</p> 
    </li> 
    <!--->until car[car.length-1]<!---> 
</ul> 

我是新的,所以,如果我沒有解釋清楚的東西。我很抱歉,我會盡力澄清。

編輯:感謝所有的反饋,結束使用ng-repeat。我意識到有多種方式來剝皮這隻貓。我的目標是獲得多個答案。下次我知道要問一個具體的解決方案。

+1

我想你可能需要更多一點關於Web開發,輔導服務,YouTube等,並獲得了基本的操作知識。 –

+0

您應該將您的javascript代碼封裝在

0

我真的沒有試圖去吝嗇......但是你真的太離譜了,甚至很難知道從哪裏開始。這甚至不是如何執行JavaScript代碼。這些都不會運行,瀏覽器會認爲它是你想要顯示的奇怪文本。

JS是不是你只是堅持你的HTML代碼中的任何地方,並讓它像你有它的輸出。它與HTML(這不是一種腳本語言)分開運行。我不知道你從哪裏得到了#{}的東西。這是對CSS樣式的某種誤解嗎?

<ul id="cars"></ul> 
<script> 
    var car = [ 
     {imageUrl:'url1',name:'name1',brand:'brand1',desc:'desc1'}, 
     {imageUrl:'url2',name:'name2',brand:'brand2',desc:'desc2'}, 
     {imageUrl:'url3',name:'name3',brand:'brand3',desc:'desc3'}, 
     {imageUrl:'url4',name:'name4',brand:'brand4',desc:'desc4'} 
    ]; // don't know where your array comes from, had to make my own 

    var carsElem = document.getElementById('cars'); 
    var htmlOut = ''; 
    for (i=0; i<car.length; i++) 
     htmlOut += '<li><img src="'+car[i].imageUrl+'"><h3>'+car[i].name+'</h3><span class="brand">'+car[i].brand+'</span><p>'+car[i].desc+'</p></li>'; 
    carsElem.innerHTML = htmlOut; 
</script> 

正如你可以看到這個看起來什麼像你放什麼。你放什麼都不是任何形式的HTML/JavaScript。如果你希望能夠做到這一點,你將不得不從零開始學習「hello world」。

+0

基於角標籤...這個答案是非常離譜的。 OP的代碼非常接近於可操作的角模板 – charlietfl

+0

即使它不是角的,jade也是在節點服務器上的javascript中運行的模板引擎 – charlietfl

+0

@charlietfl - 它也有一個jQuery標記...似乎沒有多大意義。這個問題只是說他有一個javascript數組,並且希望將其放入HTML元素中,並被標記爲顯示在網站的「javascript」部分中。第一次提到玉是在評論和我的回答之後提出的。 –