Use ng-repeat to extract information from an array and populate it into a datalist

Question

Use ng-repeat to extract information from an array and populate it into a datalist

I've already tried searching for a solution to my issue on Google, but I couldn't find anything that really helped me. I'm looking to create an input field that also functions like a dropdown. This way, I can either type in my own data or select from the dropdown options. I attempted to use the select element, but then I could only select predefined data and not enter my own. That's why I decided to use datalist instead. My goal is to populate my datalist with data from an array, like this:

index.html

<input type="text" ng-model="model.person.profession" list="professions"/>
<datalist id="professions">
  <option ng-repeat="profession in professions" value="{{profession.id}}">{{profession.name}}</option>
</datalist>

app.js

$scope.professions = [
  {'id':1, 'name':'doctor'},
  {'id':2, 'name':'farmer'},
  {'id':3, 'name':'astronaut'}
];

However, when I try to view my data in the dropdown, it doesn't show up. What am I missing here?

javascript angularjs angularjs-ng-repeat html-datalist

Answer 1

Answer №1

To display the options in a dropdown, you can utilize ng-options. Check out this example for reference.

<select ng-model="selected">
    <option ng-repeat="value in careers" value={{value.code}}>{{value.title}}</option>
</select>

Answer 2

To display the options in a dropdown, you can utilize ng-options. Check out this example for reference.

<select ng-model="selected">
    <option ng-repeat="value in careers" value={{value.code}}>{{value.title}}</option>
</select>

Answer 3

Answer №2

angular.module('myApp', [])
  .controller("dataListController", function ($scope){
 $scope.professions = [
  {'id':1, 'name':'doctor'},
  {'id':2, 'name':'farmer'},
  {'id':3, 'name':'astronaut'}
];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
  <section ng-controller="dataListController">
     <input list="browsers" name="browser">
      <datalist id ="browsers">
        <option ng-repeat="x1 in professions" value="{{x1.name}}">
    </datalist>
    
   
  </section>
</main>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
  <section ng-controller="dataListController">
     <input list="browsers" name="browser">
      <datalist id ="browsers">
        <option ng-repeat="x1 in professions" value="{{x1.id}}">
    </datalist>


  </section>
</main>

Answer 4

angular.module('myApp', [])
  .controller("dataListController", function ($scope){
 $scope.professions = [
  {'id':1, 'name':'doctor'},
  {'id':2, 'name':'farmer'},
  {'id':3, 'name':'astronaut'}
];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
  <section ng-controller="dataListController">
     <input list="browsers" name="browser">
      <datalist id ="browsers">
        <option ng-repeat="x1 in professions" value="{{x1.name}}">
    </datalist>
    
   
  </section>
</main>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
  <section ng-controller="dataListController">
     <input list="browsers" name="browser">
      <datalist id ="browsers">
        <option ng-repeat="x1 in professions" value="{{x1.id}}">
    </datalist>


  </section>
</main>

Answer 5

Answer №3

Make sure to include a Select element before each option. Also, don't forget to add track by $index inside the ng-repeat loop to avoid errors caused by duplicate data.

   <select>
        <option ng-repeat="value in professions track by $index " value="{{value.id}}">{{value.name}}</option>
    </select>

Alternatively, you can use the following code:

 <select>
    <option ng-repeat="(key, value) in professions " value="{{key.id}}">{{value.name}}</option>
</select>

Check out the demo here: http://jsfiddle.net/HB7LU/28745/

Answer 6

Make sure to include a Select element before each option. Also, don't forget to add track by $index inside the ng-repeat loop to avoid errors caused by duplicate data.

   <select>
        <option ng-repeat="value in professions track by $index " value="{{value.id}}">{{value.name}}</option>
    </select>

Alternatively, you can use the following code:

 <select>
    <option ng-repeat="(key, value) in professions " value="{{key.id}}">{{value.name}}</option>
</select>

Check out the demo here: http://jsfiddle.net/HB7LU/28745/

Answer 7

Answer №4

Try using ng-value in place of value when dealing with options

<option ng-repeat="job in jobs" ng-value="{{job.code}}">{{job.title}}</option>

Share your plunkr or code snippet

Answer 8

Try using ng-value in place of value when dealing with options

<option ng-repeat="job in jobs" ng-value="{{job.code}}">{{job.title}}</option>

Share your plunkr or code snippet

Answer 9

Answer №5

If you want to explore another approach, consider utilizing ngOptions in the following manner:

<select class="form-control" ng-model="selectedOption" ng-options="option.name for option in careers track by option.id">

Answer 10

If you want to explore another approach, consider utilizing ngOptions in the following manner:

<select class="form-control" ng-model="selectedOption" ng-options="option.name for option in careers track by option.id">

Answer 11

Answer №6

It is important to use select instead of datalist :

<select>
    <option ng-repeat="(key, value) in careers " value="{{id}}">{{value}}</option>
</select>

Answer 12

It is important to use select instead of datalist :

<select>
    <option ng-repeat="(key, value) in careers " value="{{id}}">{{value}}</option>
</select>

Use ng-repeat to extract information from an array and populate it into a datalist

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

How can I locate and substitute a specific script line in the header using Jquery?

I consistently encounter the error message 'XRWebGLLayer is not defined no-undef' while implementing three.js within react.js to develop a WebXR application

Accessing store in Vue, the getter function returns a value representing whether the user is currently logged

Implementing Icons in Custom Headers of AG Grid Using vue js

Obtain the URL within each promise

Exploring jQuery's AJAX capabilities in handling cross-domain requests and implementing Basic Authentication

jQuery may not function properly in a dynamic content environment

Methods for adding a line to an array

JS/PHP: No error message will be alerted

Can I obtain a dictionary containing the connections between labels and phrases from the classifier?

Repeated URL causes Node to redirect

Issue with AngularJS: Not able to get second app in template to function properly

Issue with Firefox pageMod addon: window.location not functioning properly

Unable to detect JavaScript in Chrome Developer Tools

Analyzing JavaScript performance without causing your browser to crash

Is it possible to upload a file using Angular and ASP.NET Web API Core?

Utilize CSS in your HTML using Express framework

The size of the cursor varies depending on the line it's placed on

Is there a way to append the current path to a link that leads to another URL?

Tips for adjusting column positions in a table while maintaining a fixed header and utilizing both horizontal and vertical scrolling