基于数组长度的html列表元素

Question

我在后端有一组汽车，其长度是用户定义的。因此，如果用户选择 3 辆汽车，则数组中将包含 3 个元素。我想在列表中的 html 元素中显示汽车的某些方面。该数组是基于 javascript 的。

大意是这样的：

<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。我意识到有多种方法可以给这只猫剥皮。我的目标是得到多个答案。下次我知道要求一个特定的解决方案。

Answer 1

使用角度完整的 html 语法，我假设您在控制器中有一个数组 $scope.cars。

您可以使用ng-repeat 创建您的列表：

<ul class="cars">
   <li ng-repeat="car in cars">
      <img ng-src="car.imageUrl">
      <h3>{{car.name}}</h3>
      <span id="brand">{{car.brand}}</span>
      <p>{{car.desc}}</p>
   </li>   
</ul>

Answer 2

我真的不想刻薄……但你离得太远了，甚至很难知道从哪里开始。这甚至不是 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”学习。