Question

我已经用谷歌搜索了我的问题，但没有什么真正帮助我。我需要一个输入字段，它也像下拉列表一样工作。所以我可以在输入字段中编写自己的数据或从下拉列表中选择数据。我尝试选择但是我只能选择数据并且不能在输入中写入数据。这就是我使用datalist的原因。我想把我的数据中的数据写入我的datalist：

的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-options在drowpdown中显示值。请看看这个fiddle。

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

Answer 2

在Select之前添加option元素。并在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>

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

Answer 3

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

在选项中添加ng-value而不是值

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

提供你的plunkr / code snippet

Answer 5

必须选择而不是datalist：

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

Answer 6

你也可以尝试使用这样的ngOptions：

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

使用ng-repeat将数据从数组中获取到datalist中

6 个答案: