使用 ng-repeat 从数组中获取数据到数据列表

Question

我已经用谷歌搜索了我的问题，但没有任何帮助。我需要一个输入字段，它也像下拉菜单一样工作。所以我可以在输入字段中写入自己的数据或从下拉列表中写入 select 数据。我尝试使用 select 但后来我只能 select 数据并且无法在输入中写入数据。这就是我使用数据列表的原因。我想像这样将数组中的数据写入数据列表：

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

我的数据没有显示在下拉列表中。我做错了什么？

Answer 1

在选项

中添加ng-value而不是值

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

提供您的 plunkr/code 片段

Answer 2

必须有select而不是datalist :

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

Answer 3

您可以使用 ng-options 在下拉列表中显示值。请看看这个fiddle.

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

Answer 4

您也可以像这样尝试使用 ngOptions：

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

Answer 5

在 option 之前添加 Select 元素。并在 ng-repeat 中添加 track by $index 。否则对于重复数据，你会得到错误。

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

或者，

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

演示：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>

使用 ng-repeat 从数组中获取数据到数据列表

get data from array into datalist with ng-repeat

javascript

angularjs

angularjs-ng-repeat

html-datalist