在 Javascript 中使用类似 ngRepeat 的东西答案

【问题标题】：Using something like ngRepeat in Javascript在 Javascript 中使用类似 ngRepeat 的东西
【发布时间】：2021-01-16 13:09:11
【问题描述】：

我想用数组中的数据填充下拉列表。下面的代码是我在使用 angularJS 时会做的事情。我想知道是否有办法在 javascript 中执行此操作，或者以某种方式允许 ng-options 在这里工作。

  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var city = ["NewYork", "Chicago", "Florida"];

  var contentString = 
      `<div class="dropdown">
   <select>
     <option ng-options="item for item in ${city}">{{item}}</option>
   </select>
</div>`;

  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)',
//    zIndex: Math.round(myLatlng.lat() * -100000) << 5
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
  });

演示：https://jsfiddle.net/spdmu6we/5/

【问题讨论】：

这是JavaScript solution
@RandyCasburn 这行得通，但是有没有办法按照我的方式实现它，而不必将 HTML 放在 HTML 部分并在那里有内容字符串变量。
是的，您有两个选择： 1. 使用字符串解析构建一个 HTML 字符串，然后将其作为您的内容传递 2. 将您拥有的字符串解析到一个 DOM 节点并使用我的代码提供。
这里是字符串连接解决方案：jsfiddle.net/1wrmde9y
是的，这行得通，你可以把这个作为答案，所以我可以接受它

标签： javascript html arrays angularjs angularjs-directive

【解决方案1】：

根据您的评论，您更愿意在没有 HTML `' 的情况下执行此操作。

因此，您有两个选择：1. 使用字符串解析构建 HTML 字符串，然后将其作为内容传递 2. 将您拥有的字符串解析到 DOM 节点并使用我提供的代码。

这用通用代码替换了 GMap 的东西。您仍然可以使用与 DOM 相关的代码。

这里有一个解决方案：

var city = ["NewYork", "Chicago", "Florida"];
const pre = '<div class="dropdown"><select>';
const post = '</select></div>';
let options = '';
city.forEach(city => {
  let o = `<option value=${city}>${city}</option>`;
  options += o;
});
content = pre + options + post;

var infowindow = document.createElement('div');
infowindow.innerHTML = content;
infowindow.style.display = 'none'

var marker = document.createElement('button');
marker.innerText = "Click me";

marker.addEventListener('click', () => {
  document.body.appendChild(infowindow);
  infowindow.style.display='block';
});
document.body.appendChild(marker);

&lt;div id="map-canvas"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

在 javascript 中创建大量元素的两种典型方法是：

将一长串元素连接在一起，例如"<option>Banana</option><option>Apple</option>"，然后在父级select上使用.innerHTML
使用 javascript 独立创建每个节点，例如 document.createElement("OPTION") 和 .appendChild it。

每个都有性能影响。但是原生 javascript 不做那种模板。

【讨论】：

好吧，我尝试了第二个选项，但我不断收到空错误jsfiddle.net/wegs6okb/1
那是因为您在 HTML 中没有选择元素，但您正在尝试访问它。