棘手在AngularJS

Question

解析用2個屬性的對象，以2個獨立的模型的方法，我有這樣的代碼

<input ng-model="attribute.name" typeahead="property as property.name for property in MyObject | filter:{ paramName:$viewValue }"> 

爲MyObject是

{ name : 'A', 
    desc : 'A description' 
} 

attribute.name需要保持作爲一個簡單的字符串。但是，通過上面的代碼，attribute.name變成了我不想要的對象。所以我改變了代碼

<input ng-model="attribute.name" typeahead="property.name as property.name for property in MyObject | filter:{ paramName:$viewValue }"> 

一切都很好，直到我還需要呈現「desc」鍵。它不一定要處於ng模型中，但只要我可以渲染它，那就太好了。我不需要雙向綁定「desc」，因爲我希望數據可以以自由形式進行編輯。

既然我只是返回不是對象的property.name，我該如何訪問「desc」鍵？

Answer 1

看看typeahead頁面上的最後一個例子：https://angular-ui.github.io/bootstrap/#/typeahead。

我需要：

1 - 改變你的表達，讓對象完成，但只選擇你想要的屬性。另外，使用ngModel.$viewValue來提供要過濾的字符串。所以：

<input ng-model="attribute.name" 
    typeahead="property as property.name for property in MyObject | filter:{name: $viewValue}"> 

2 - 定義一個模板來顯示結果。您需要在此模板中設置模式，遵循規則正確顯示結果。它的一個例子是：

<script type="text/ng-template" id="resultPattern.html"> 
    <div> 
     <span ng-bind="match.name | typeaheadHighlight:query"></span><br> 
     <small ng-bind="match.desc"></small> 
    </div> 
</script> 

3 - 最後input標籤將是：

<input ng-model="attribute.name" 
    typeahead="property as property.name for property in MyObject | filter:{name: $viewValue}" typeahead-template-url="resultPattern.html"> 

編輯1：

你是對的，我輸入了錯誤的第3步：

<input ng-model="attribute.name" 
    typeahead="property.name as property for property in MyObject | filter:{name: $viewValue}" typeahead-template-url="resultPattern.html"> 

這裏是一個Plunkr：http://plnkr.co/edit/pcjV40KxkBFdyIM3L0M4?p=preview

編輯2：

我已經用後處理選擇一個回調函數更新Plunkr：http://plnkr.co/edit/pcjV40KxkBFdyIM3L0M4?p=preview

此外，還有爲ngModel格式化，你可以用它來選擇哪個項目在選擇後顯示，讓整個信息一致ngModel。