删除所有芯片后不显示自动完成建议(md-chips + md-autocomplete)
Autocomplete suggestions not shown after all chips removed (md-chips + md-autocomplete)
在我的示例 (https://jsfiddle.net/vv18yjzo/7/) 中,只要关注 md-chips 输入,就应该显示自动完成建议。当我输入一些项目时,这很有效。
但是,当添加然后删除所有可用项目时,自动完成建议为空/隐藏。我必须输入新的搜索文本才能再次看到自动完成建议。
HTML:
<md-input-container class="md-block">
<label>Categories</label>
<md-chips ng-model="vm.selectedCategories"
md-autocomplete-snap
md-require-match="true"
md-on-add="vm.onCategoryAdded($chip, $index)"
md-on-remove="vm.onCategoryRemoved($chip, $index)">
<md-autocomplete
md-selected-item="vm.autocomplete.selectedItem"
md-search-text="vm.autocomplete.searchText"
md-selected-item-change="vm.onSelectedItemChanged()"
md-search-text-change="vm.onSearchTextChanged()"
md-items="item in vm.searchCategories()"
md-item-text="item.name"
md-min-length="0"
md-select-on-match="true"
md-match-case-insensitive="true"
md-no-cache="true"
placeholder="Choose categories">
<span md-highlight-text="vm.autocomplete.searchText"
md-highlight-flags="i">{{item.name}}</span>
</md-autocomplete>
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
</md-chips>
</md-input-container>
JS:
(function () {
'use strict';
angular
.module('app', [
'ngMaterial',
'ngMessages'
])
.factory('CategoriesService', CategoriesService)
.controller('CategoriesCtrl', CategoriesCtrl);
function CategoriesService($q, $timeout) {
var that = {
find: find
},
categories = [
{ name: 'a' },
{ name: 'ab' },
{ name: 'abc' },
{ name: 'abcd' },
{ name: 'abcde' },
{ name: 'abcdef' }
];
function find(search, selectedCategories) {
var deferred = $q.defer(),
result = categories.filter(function(category) {
return (-1 === selectedCategories.indexOf(category) && -1 !== category.name.indexOf(search));
});
$timeout(function() {
deferred.resolve(result);
}, 100);
return deferred.promise;
}
return that;
}
function CategoriesCtrl($scope, CategoriesService) {
var vm = this;
vm.selectedCategories = [];
vm.autocomplete = {
selectedItem: null,
searchText: null
};
/* ... */
vm.searchCategories = function() {
return CategoriesService.find(vm.autocomplete.searchText.toLowerCase(), vm.selectedCategories);
};
}
})();
自动完成搜索文本似乎有一个奇怪的错误,如果您删除一个项目,它只会取消设置 searchtext 变量,然后中断自动完成事件。
检查这个工作 fiddle https://jsfiddle.net/mgsLkf89/3/
vm.onCategoryRemoved = function($chip, $index) {
if (!vm.autocomplete.searchText)
vm.autocomplete.searchText=null;
};
在我的示例 (https://jsfiddle.net/vv18yjzo/7/) 中,只要关注 md-chips 输入,就应该显示自动完成建议。当我输入一些项目时,这很有效。 但是,当添加然后删除所有可用项目时,自动完成建议为空/隐藏。我必须输入新的搜索文本才能再次看到自动完成建议。
HTML:
<md-input-container class="md-block">
<label>Categories</label>
<md-chips ng-model="vm.selectedCategories"
md-autocomplete-snap
md-require-match="true"
md-on-add="vm.onCategoryAdded($chip, $index)"
md-on-remove="vm.onCategoryRemoved($chip, $index)">
<md-autocomplete
md-selected-item="vm.autocomplete.selectedItem"
md-search-text="vm.autocomplete.searchText"
md-selected-item-change="vm.onSelectedItemChanged()"
md-search-text-change="vm.onSearchTextChanged()"
md-items="item in vm.searchCategories()"
md-item-text="item.name"
md-min-length="0"
md-select-on-match="true"
md-match-case-insensitive="true"
md-no-cache="true"
placeholder="Choose categories">
<span md-highlight-text="vm.autocomplete.searchText"
md-highlight-flags="i">{{item.name}}</span>
</md-autocomplete>
<md-chip-template>
<span>
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
</md-chips>
</md-input-container>
JS:
(function () {
'use strict';
angular
.module('app', [
'ngMaterial',
'ngMessages'
])
.factory('CategoriesService', CategoriesService)
.controller('CategoriesCtrl', CategoriesCtrl);
function CategoriesService($q, $timeout) {
var that = {
find: find
},
categories = [
{ name: 'a' },
{ name: 'ab' },
{ name: 'abc' },
{ name: 'abcd' },
{ name: 'abcde' },
{ name: 'abcdef' }
];
function find(search, selectedCategories) {
var deferred = $q.defer(),
result = categories.filter(function(category) {
return (-1 === selectedCategories.indexOf(category) && -1 !== category.name.indexOf(search));
});
$timeout(function() {
deferred.resolve(result);
}, 100);
return deferred.promise;
}
return that;
}
function CategoriesCtrl($scope, CategoriesService) {
var vm = this;
vm.selectedCategories = [];
vm.autocomplete = {
selectedItem: null,
searchText: null
};
/* ... */
vm.searchCategories = function() {
return CategoriesService.find(vm.autocomplete.searchText.toLowerCase(), vm.selectedCategories);
};
}
})();
自动完成搜索文本似乎有一个奇怪的错误,如果您删除一个项目,它只会取消设置 searchtext 变量,然后中断自动完成事件。
检查这个工作 fiddle https://jsfiddle.net/mgsLkf89/3/
vm.onCategoryRemoved = function($chip, $index) {
if (!vm.autocomplete.searchText)
vm.autocomplete.searchText=null;
};