gpt4 book ai didi

javascript - HTML5/Angular : How can you have an autocomplete list hold object values?

转载 作者:行者123 更新时间:2023-11-30 10:14:24 25 4
gpt4 key购买 nike

脚本.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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com