我在使用以下方案时遇到了ngstrap typeahead的问题:
var companyItem= [
{
"item_id": 1,
"item_name": "mobile phone middle nokia",
"company_id": 1,
},
{
"item_id": 2,
"item_name": "mobile phone iphone",
"company_id": 1,
},
{
"item_id": 8,
"item_name": "mobile phone samsung",
"company_id": 1,
},
{
"item_id": 9,
"item_name": "apple watch",
"company_id": 1,
}
]
我的标记:
<input type="text" class="form-control" name="itemName" id="itemName" ng-model="item.itemName" data-min-length="0" bs-options="item as item.item_name for item in companyItem | filter:{item_name:$viewValue}:customCompare" bs-typeahead="setCustomerData" data-watch-options="true" data-container="body" autocomplete="off" ng-readonly="readOnly" required>
我的脚本是:
$scope.customCompare = function(itemName, viewValue) {
var keyword = viewValue.split(" ");
var partialMatch = false;
for(var i=0;i<keyword.length;i++){
console.log('keyword'+i+' '+keyword[i]);
console.log('itemName '+itemName);
console.log('keyword[i].indexOf(itemName) > -1 '+itemName.indexOf(keyword[i].toString()));
if(itemName.indexOf(keyword[i].toString()) > -1){
console.log(' <<>>---------------');
partialMatch =true;
}
}
return partialMatch;
}
我尝试使用关键字&#39;移动iphone&#39;进行搜索在输入文本中但没有结果。
当我在控制台日志中写入但未显示
的记录时,返回true无论如何,如果打电话给iphone&#39;它的工作方式类似于默认类型
我做错了什么或者这种方法不起作用
https://plnkr.co/edit/3iJwREetLMnTup24Sbtd
先谢谢。
答案 0 :(得分:1)
当我在typeahead.js中看到“filter:'bsAsyncFilter'”时,我得到了另一个解决方案,所以我通过绕过过滤器来覆盖我的js,因为现在我通过api使用异步数据:
function CustomTypeaheadFilter ($filter) {
return function(array, expression, comparator) {
if(array && angular.isFunction(array.then)) {
return array.then(function(results) {
console.log(results);
// return $filter('filter')(results, expression, comparator)
return results;
});
} else {
//return $filter('filter')(array, expression, comparator);
return array;
}
}
};
标记:
<input type="text" class="form-control" name="itemName" id="itemName" ng-model="item.itemName" data-min-length="0" bs-options="item as item.item_name for item in getItemfromDB($viewValue)" bs-typeahead="setCustomerData" data-filter="CustomTypeaheadFilter" autocomplete="off" required>
过滤器选项没有在ngstrap文件中声明,我在github上发布了这个问题无论如何希望ngstrap会在文档中提出这个选项。
答案 1 :(得分:0)
item as item.item_name for item in companyItem | filter:{item_name:$viewValue}:customCompare
。之后Ng-strap adds a default filter that uses a default comparator
一个hacky解决方案是绕过默认过滤器。
$scope.alwaysTrue = function() { return true; }
&#13;
<input ... bs-options="item as item.item_name for item in companyItem | filter:{item_name:$viewValue}:customCompare" data-comparator="alwaysTrue" ...>
&#13;
更清洁的解决方案是设置data-comparator="customCompare"
。遗憾的是,这不起作用,因为here包含:$viewValue
,而不是:{item_name: $viewValue}
。因此,customCompare
永远不会处理整个对象。
API可以而且应该得到改进,你应该在github上打开一个关于它的问题。