3

我正在使用 Angular UI-bootstrap typeahead。

我有 HTML

<input type="text" 
       ng-init="selectedCrossFormFieldText = selectedCrossFormFieldText || {}" 
       ng-model="selectedCrossFormFieldText[fieldId]" 
       placeholder="Auto-complete data from field of form" 
       empty-typeahead 
       ng-trim="false" 
       typeahead="crossFormField.id as crossFormField for crossFormField in getCrossFormFieldData(fieldId, $viewValue) | filter:$viewValue:optionComparator" 
       typeahead-template-url="views/blocks/cross_form_data_typeahead.html" 
       typeahead-on-select="addCrossFormField(fieldId, $item, $model, $label)" 
       typeahead-loading="loadingCrossFormField[fieldId]"  
       typeahead-min-length="0" class="form-control"  />

和

脚本：

.then(function (response) {
    console.log('DataForTypeahead', response);
    return response.data;
});

当我键入时，它会在 typeahead-popup 中显示匹配的选项。但是，当没有匹配项时，我应该怎么做才能在同一个弹出窗口“未找到匹配项”上显示？

4

1 回答 1

4

您可以测试 response.data 的大小。如果为 0，则将一个元素压入数组：

.then(function (response) {
    console.log('DataForTypeahead', response);
    if (response.data.length === 0) {
        response.data.push({
            label: 'No matches found'
        })
    }
    return response.data;
});

您可能希望按如下方式修改您的预输入代码

typeahead="crossFormField.id as crossFormField.label for crossFormField in getCrossFormFieldData(fieldId, $viewValue) | filter:$viewValue:optionComparator"
于 2014-08-17T14:35:49.610 回答