Daten von Array in Datenliste mit ng-Wiederholung erhalten

Question

Ich googelte bereits mein Problem, aber nichts half mir wirklich. Ich brauche ein Eingabefeld, das auch wie ein Dropdown funktioniert. So kann ich meine eigenen Daten in das Eingabefeld schreiben oder Daten aus dem Dropdown auswählen. Ich habe mit Select versucht, aber dann kann ich nur Daten auswählen und kann keine Daten in die Eingabe schreiben. Deshalb habe ich den Datalist benutzt. Ich möchte, dass meine Daten von meinem Array meine Datenliste, so schreiben:

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'} 
]; 

Meine Daten nicht gezeigt wird im Dropdown-Menü. Was mache ich falsch?

Answer 1

Sie können für ng-Optionen verwenden zeige den Wert in drowdown. Bitte werfen Sie einen Blick auf diese fiddle.

<select ng-model="selected"> 
    <option ng-repeat="value in professions" value={{value.id}}>{{value.name}}</option> 
</select> 

Answer 2

hinzufügen ng-value statt Wert in Optionen

<option ng-repeat="profession in professions" ng-value="{{profession.id}}">{{profession.name}}</option> 

Geben Sie Ihren plunkr/Code-Schnipsel

Answer 3

Es muss statt Datenliste sein wählen:

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

Answer 4

können Sie auch versuchen, ngOptions wie folgt aus:

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

Answer 5

hinzufügen Select Element vor option. Und fügen Sie auch track by $index in ng-repeat hinzu. Andernfalls werden doppelte Daten angezeigt.

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

oder

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

DEMO: http://jsfiddle.net/HB7LU/28745/

Answer 6

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>