7

我正在开发单页应用程序，Angular-TypeAhead当我在文本框中写一些东西时，它会向我显示建议，但是当我选择建议时，文本框的值会变成Object object而不是名称

这是我的 HTML 标记

<div class="bs-example" style="padding-bottom: 24px;" append-source>
    <form class="form-inline" role="form">
      <div class="form-group">
        <label><i class="fa fa-globe"></i> State</label>
        <input type="text" class="form-control" ng-model="selectedState" ng-options="state.FirstName for state in states" placeholder="Enter state" bs-typeahead>
      </div>
    </form>
  </div>

这是我的 AngularJS 代码

var app = angular.module('mgcrea.ngStrapDocs', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])

        .controller('TypeaheadDemoCtrl', function ($scope, $templateCache, $http) {

            $scope.selectedState = '';

            $http.get('/api/servicesapi/GetAllClients')
            .then(
                function (result) {
                    //success
                    $scope.states = result.data;
                },
                function () {
                    //error
                });

        });

看这里的图片

在此处输入图像描述 在此处输入图像描述

4

3 回答 3

6

更改ng-options="state.FirstName for state in states"为ng-options="state as state.FirstName for state in states"

于 2014-08-12T22:10:58.273 回答
2

这是 Angular 4 中的解决方案，而不是 angularJS

我添加[inputFormatter]="formatMatches"了格式化输入（ngmodel）并[resultFormatter]="formatMatches"格式化显示的数据

<input id="typeahead-format" type="text" [(ngModel)]="clickedItem" 
    name="profile" (selectItem)="selectedItem($event)"
   [resultFormatter]="formatter" [inputFormatter]="formatter"
   [ngbTypeahead]="search" #instance="ngbTypeahead"/>

格式化程序功能是这样的：

formatter = (x: { label: string }) => x.label;

x：是对象

于 2018-04-27T09:35:09.287 回答
0

对于任何使用 angular bootstrap 并发现相同问题的人，我在这方面花了太长时间。

本质上，您需要将模型视为输出的字符串，然后从 api 调用返回的复杂模型转换为字符串。

然后，您需要挂钩 OnSelect 方法以提取复杂对象并将其（或对象的唯一 ID）存储在单独的变量中。它在文档中是正确的，但考虑到您通常需要预先输入的键/值对，它并没有得到太大的重视。不仅仅是一个字符串。

https://valor-software.com/ngx-bootstrap/#/typeahead#on-select

这是一个来自 typeahead 的代码片段，它工作正常，将搜索设置为来自复杂对象的 [name] 值，并将 selectedObject 设置为整个项目。

  <pre class="card card-block card-header">Search: {{ search | json }}</pre>
      <pre class="card card-block card-header">Selected: {{ selectedOption | json }}</pre>

      <ng-template #customItemTemplate let-model="item" let-index="index">
        <div>
          <p>This is: {{ model.name }} Number: {{ model.id }} Index: {{ index }}</p>
          <p>Some secondary information about {{ model.name }}</p>
        </div>
      </ng-template>

      <input [(ngModel)]="search"
             [typeahead]="suggestions$"
             typeaheadOptionField="name"
             (typeaheadOnSelect)="onSelect($event)"
             [typeaheadAsync]="true"
             typeaheadWaitMs="500"
             [typeaheadMinLength]="3"
             [typeaheadItemTemplate]="customItemTemplate"
             class="form-control"
             placeholder="Enter a street name">

             <div class="alert alert-danger" role="alert" *ngIf="errorMessage">
               {{ errorMessage }}
             </div>

然后在我的组件中

  ngOnInit(): void {
    this.suggestions$ = new Observable((observer: Observer<string>) => {
      observer.next(this.search);
    }).pipe(
      switchMap((query: string) => {
        if (query) {
          return this.YOURSERVICE.YOURMETHOD(query);
        }

        return of([]);
      })
    );
  }

  onSelect(event: TypeaheadMatch): void {
    this.selectedOption = event.item;
  }

你的方法应该返回一个带有 [name] 属性的接口

这应该足以开始了。这是非常古老的，但我在找到我需要的东西之前通过了这里。

于 2021-02-11T23:44:41.770 回答