Question

的script.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存储在其他地方以供使用。不幸的是，它只是一个对象名列表，而不是对象。

我想要的。

Answer 1

您需要将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以允许绑定到模型。

我更新了plunker - http://plnkr.co/edit/ski53kuM5oJA21x0MO8O?p=preview

您也可以参考http://angular-ui.github.io/bootstrap/（在Typeahead部分下）。查找customSelected示例。它完全符合你的要求。

Answer 2

您可以在控制器中添加一个功能来实现此功能。

请参阅plunkr：http://plnkr.co/edit/sN6Adnj7kIrGXJ5QyWjN?p=info

标记：

<h3 class="ng-binding">Item Id: {{ getId(itemName) }}</h3>


$scope.getId = function (name) {
  var response = '';

  $scope.items.forEach(function (d) {
    if(d.name === name) {
     response = d.id;
    }
  })
  return response;
};

希望这有帮助。

HTML5 / AngularJS：如何拥有自动完成列表保持对象值？

2 个答案: