使用ng-repeat從數組中獲取數據到datalist中

我已經使用了我的問題，但沒有什麼幫助。我需要一個輸入字段，它也像下拉菜單一樣工作。因此，我可以在輸入字段中編寫自己的數據或從下拉列表中選擇數據。我嘗試使用select，但是我只能選擇數據，不能在輸入中寫入數據。這就是我使用數據主義的原因。我想從我的陣列我的數據寫入到我的DataList這樣的：使用ng-repeat從數組中獲取數據到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'} 
];

沒有顯示我的數據在下拉菜單中。我究竟做錯了什麼？

來源

2017-04-06 BlueCat

可以使用NG-選項顯示下降的價值。請看看這個fiddle。

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

來源

2017-04-06 06:55:28

也許我不夠具體。我需要一個輸入字段，它也像下拉菜單一樣工作。因此，我可以在輸入字段中編寫自己的數據或從下拉列表中選擇數據。我嘗試使用select，但是我只能選擇數據，不能在輸入中寫入數據。這就是我使用數據主義的原因。我用更具體的細節編輯了我的問題。 – BlueCat

@BlueCat：http://jsfiddle.net/NSkz4/28/。請看看這個小提琴 –

期權

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

添加ng-value，而不是價值給您plunkr /代碼片斷

來源

2017-04-06 06:53:28 Sujatha

必須有選擇的，而不是數據列表：

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

來源

2017-04-06 06:54:44

{{名稱}}抄是{{價值}} – Ved

哦..謝謝，更新。 –

您的代碼將無法使用。裏面的選項它會顯示像：{id：1，name：'doctor} – Ved

您也可以嘗試使用ngOptions這樣的：

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

來源

2017-04-06 06:57:39 kaushlendras

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>

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

來源

2017-04-06 07:00:39 Ved

可能我還不夠具體。我需要一個輸入字段，它也像下拉菜單一樣工作。因此，我可以在輸入字段中編寫自己的數據或從下拉列表中選擇數據。我嘗試使用select，但是我只能選擇數據，不能在輸入中寫入數據。這就是我使用數據主義的原因。我用更具體的細節編輯了我的問題。 – BlueCat

@BlueCat你應該做到這一點。包括我在內，另有4人提出瞭解決方案，這有效，但你現在不需要這個。 – Ved

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>

來源

2017-04-06 07:11:40

使用ng-repeat從數組中獲取數據到datalist中

回答

相關問題