Question

我目前的代码存在问题，如果我创建一个新芯片，它会触及我的标签模型并创建一个名称和ID。

但是，当我键入以选择返回的选项时，如果我单击该选项，它将返回一个Object，而不是标签名称。

这里是用户界面的屏幕截图，其中md-autocomplete显示的下拉列表返回了名称，只显示了显示名称的新标签，但点击hotel会返回{{ 1}}。

我的问题是我想只返回名称而不确定我需要在哪里进行更改。

UI：

labels.html：

{"id":1,"name":"hotel"}

labelsController.ts：

<md-content layout="column">
    <md-chips ng-model="cont.vm.selectedLabels" md-autocomplete-snap md-require-match="false" 
        md-on-append="cont.createLabel($chip)">
      <md-autocomplete
          md-selected-item="cont.vm.selectedItem"
          md-search-text="searchText"
          md-items="item in cont.querySearch(searchText)"
          md-item-text="item.name"
          md-min-length="2"
          placeholder="Type to add a label">
        <span md-highlight-text="cont.vm.searchText" >{{item.name}}</span>
           <md-not-found>
             No matches found.
            </md-not-found>       
      </md-autocomplete>
      <md-chip-template>
        <span>
          <strong>{{$chip.name}}</strong>
        </span>
      </md-chip-template>   
    </md-chips>
    <br />
    <p class="md-title">Existing Labels</p>
    <md-list>
      <md-list-item class="md-2-line label-option" ng-repeat="label in cont.vm.labels" layout="row"
          layout-wrap>
        <div class="md-item-text md-whiteframe-z1" flex>
          <h3>(NAME: {{label.name}}) (ID: {{label.id}})</h3>
        </div>
      </md-list-item>
    </md-list>
</md-content>

labelsService.ts：

constructor(private $scope: common.IScope<LabelScope>, 
                private labelsService: ILabelsService){

                    super($scope);
                    this.vm.labels = this.loadLabels();
                    this.vm.selectedLabels = [];
                    this.vm.selectedItem = null;
                    this.vm.searchText = null;         
                    console.log($scope);           
            } 

            private loadLabels() {
                return this.labelsService.getLabels();
            }
            // Returns list of labels that already exists
            public querySearch (query: string) {
                var results = query ? this.loadLabels() : [];
                return results;
                console.log(results);
            }          
            // Returns name + ID on new chip created
            public createLabel($chip: string) {
                return {
                    name: $chip,
                    id: 4
                };                                               
            }

Answer 1

前一段时间我遇到了同样的问题。其原因是，即使您从下拉列表中选择项目，也会调用md-on-append函数。

当您从下拉列表中选择一个项目时，它实际上会返回以下内容：

{
    name:{
           name:hotel,
           id:1
    },
    id:4
}

所以你应该稍微更改createLabel()函数的代码。

<强> JS：

public createLabel($chip) {
    angular.forEach(this.vm.selectedLabels,function(element,index){
         if(element.name==$chip.name||element.name==$chip){
             this.vm.selectedLabels.splice(index,1);
         }
    })
    if($chip.id==undefined){
         return {
           name: $chip,
           id: 4
         };                                 
    }
    else{
        return $chip;
    }

Angular Material + TypeScript：自动完成+选择选项

1 个答案: