脚本.js
function loadItems() {
var data = [
{ name: 'Chicken', id: '7777' },
{ name: 'Corn', id: '9001' },
{ name: 'Cabbage', id: '6996' },
{ name: 'Chili', id: '4242' },
{ name: 'Cheese', id: '1337' }
];
sessionStorage.setItem( 'items', JSON.stringify(data) );
}
function TypeaheadCtrl( $scope, $http ) {
$scope.selected = undefined;
$scope.items = JSON.parse(sessionStorage.getItem('items'));
}
index.html
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
<h4 class="ng-binding">Item Name: {{itemName}}</h4>
<h4 class="ng-binding">Item Id: 7777</h4>
<input id='itemInput' type="text" ng-model="itemName" placeholder="Item Name" typeahead="item.name for item in items | filter:$viewValue" class="form-control">
</div>
</body>
这是我使用的更多代码:http://plnkr.co/edit/sqcbYIkhy29hq8TyiHRx
在上面的链接中，我能够列出自动完成列表的对象，但只能列出这些对象的名称。
我想要的是只显示列表中对象的名称，但当它被选中时，将所选对象的 ID 存储在其他地方以供使用。不幸的是，它只是对象名称的列表，而不是对象。
我想要的。
最佳答案
你需要绑定(bind)到 ng-model 作为对象而不是文本
<h3 class="ng-binding">Item Name: {{item.name}}</h3>
<h3 class="ng-binding">Item Id: ({{item.id}})</h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
另一件事是 typeahead 表达式应该更改为 item as item.name for item in items 以允许绑定(bind)到模型。
我更新了 plunker - http://plnkr.co/edit/ski53kuM5oJA21x0MO8O?p=preview
也可以引用http://angular-ui.github.io/bootstrap/ (在 Typeahead 部分下)。查找 customSelected 示例。它完全按照你的意愿行事。
关于javascript - HTML5/Angular : How can you have an autocomplete list hold object values?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24689717/