提前輸入Angular Type，其中將Model作為Id，將Text作為數組對象的名稱

Question

我正在使用Angular UI Typeahead指令，所以你能告訴我如何設置一個model作為id並在其上display text作為name 。我嘗試如下所示，但是它不起作用，該怎么辦？ 謝謝。

注意：請在下面的代碼筆上輸入a或k進行測試。

密碼筆

JS

 var states=[{'id':1,'name':'Alabama'},{'id':2,'name':'Kansas'}]

HTML

    <input name="states" id="states" type="text" placeholder="enter a state" ng-
model="selected" typeahead="a.id as a.name for a in states | filter:$viewValue" 
class="form-control">

Answer 1

問題是，當您嘗試僅將選定狀態的id放入ng-model ，它將僅在該輸入字段中顯示選定狀態的id ，因為ng-model僅具有id值。

因此，基本上，您必須選擇整個對象，而不僅僅是將id放在ng-model 。 通過它選擇任何狀態時a as a.name表達式將僅顯示其name 。 而且，只要您想傳遞狀態id就可以使用selected.id 。

標記

<div class="form-group">
  <label for="states">Search for US States</label>
  <pre>Model: {{selected | json}}</pre>
  <input name="states" id="states" type="text" 
     placeholder="enter a state" ng-model="selected" 
     typeahead="a as a.name for a in states | filter:$viewValue" 
     class="form-control">
</div>

分叉的Codepen