如何使md-chips md-separator-keys与md-autocomplete一起工作?

时间:2017-06-01 12:28:17

标签: html angular-material

当我使用带有md-separator-keys的md-chips时,它可以工作。 如果我添加md-autocomplete,则md-separator-keys不起作用。

我如何使用它:

<md-chips ng-model="chips.selectedChips" md-add-on-blur="true" md-separator-keys="customKeys"
          md-transform-chip="chips.transformChip($chip)"
          md-require-match="chips.allowToAddNew" md-autocomplete-snap>
  <md-autocomplete
      md-selected-item="chips.selectedItem"  
      md-search-text="chips.searchText"
      md-items="item in chips.querySearch(chips.searchText)"
      md-item-text="chips.getText(item)"
      placeholder="{{ field.hint }}">
    <span md-highlight-text="chips.searchText">{{ chips.getText(item) }}</span>
  </md-autocomplete>
  <md-chip-template>
    <span>{{ chips.getText($chip) }}</span>
  </md-chip-template>
</md-chips>

customKeys初始化如下:

scope.customKeys = [ $mdConstant.KEY_CODE.ENTER, $mdConstant.KEY_CODE.COMMA, 186 ];

问题是:如何使其发挥作用?

P.S。由于某种原因,附加模糊不起作用,也很高兴找到如何解决它。

p.p.s。我在github上找到了CLOSED issue,所以他们不打算解决这个有效的问题。迷人。

1 个答案:

答案 0 :(得分:0)

确定。我知道它不是一个完美的解决方案,而是一种解决方法。 这就是我在自定义指令的链接方法中添加的内容:

scope.$watch('chips.searchText', function(newValue, oldValue) {
    if (!newValue || newValue.length < 2) {
        return;
    }
    if (";,".indexOf(newValue.substring(newValue.length - 1)) < 0) {
        return;
    }

    var chipName = newValue.substring(0, newValue.length - 1);
    if (!scope.chips.selectedChips) {
        scope.chips.selectedChips = [];
    }
    scope.chips.selectedChips.push(scope.chips.transformChip(chipName));
    scope.chips.searchText = '';
});

我从md-separator-keys移除md-chips,因为它变得完全冗余