Вкладка «опция» списка данных в «div» показывает, что «опция« Элемент »не может быть вложена в элемент« div »»

Question

Код работает нормально, но я хочу лучший подход, который не будет выдавать никаких предупреждений или ошибок, чтобы выглядеть более чистым Есть ли другой способ, кроме как положить option внутрь div.

Я могу сделать это, используя id из datalist. Но есть datalist для стран, городов, зон и т. Д., И не лучше использовать id каждого datalist для привязки данных к списку данных.

Есть ли какой-либо эффективный подход, кроме использования id из datalist? Так что я могу повторно использовать один и тот же код для каждого списка данных.

<input id="input-id" list="datalist-id" type="text" placeholder="Select Cluster Group" autocomplete="off" />
<datalist id="datalist-id">
    <div ng-repeat="country in Countries">
        <option> {{country.name}} </option>
    </div>
</datalist>

Answer 1

Вам необходимо удалить div и поместить код ng-repeat в option. См. Измененный код, как показано ниже:

<input id="input-id" list="datalist-id" type="text" placeholder="Select Cluster Group" autocomplete="off" />
<datalist id="datalist-id">
    <option ng-repeat="country in Countries" value="{{country.name}}" /> 
</datalist>