CODEWITHSUNDEEP
javascriptjqueryangularjshtml
Bijay Yadav
Bijay Yadav

Reputation: 958

Nesting the datalist 'option' inside the 'div' shows "Element 'option' cannot be nested inside element 'div'"

The code works fine but I want better approach which will not throw any warning or error to look code more clean. Is there any way other than putting the option inside the div.

I am able to accomplish this by using the id of datalist. But, there are alot of the datalist for countries, cities, zones, etc. and it is not better to use the id of each datalist to bind the data to datalist.

Is there any efficient approach other than using id of the datalist? So, that I can reuse the same code for each 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>

Upvotes: 1

Views: 599

Answers (1)

Bijay Koirala
Bijay Koirala

Reputation: 242

You need to remove the div and place the ng-repeat code inside the option. Refer modified code as below:

<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>

Upvotes: 1

Related Questions