Angularjs:当输入的字符串未找到匹配项时,在预输入中不显示搜索结果

2024-05-26

我正在使用 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"  />

and

Script:

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

当我输入时,它会在预先输入弹出窗口中显示匹配的选项。但是,当没有匹配项时,我应该如何在同一个弹出窗口中显示“未找到匹配项”?


您可以测试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"
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angularjs:当输入的字符串未找到匹配项时,在预输入中不显示搜索结果 的相关文章

  • Angularjs $http 等待响应

    我是 javascript angularjs 的新手 我想在某些元素上完成鼠标悬停时显示引导弹出窗口 我为此创建了一个指令 function angular app app directive popOver window http fu
  • 按 Chartjs 条形图的键对对象进行分组

    我正在尝试使用 Chart js 创建条形图 我在尝试根据每个用户的状态创建分组条形图时陷入困境 这是数据 statusId 0 firstName Joe status appealed count 1 statusId 0 firstN
  • Angular UI 手风琴,标题部分带有按钮

    我正在使用手风琴指令http angular ui github com bootstrap http angular ui github com bootstrap 我需要在标题部分有两个按钮 添加 在原始下方创建完全相同的手风琴 移除
  • AngularJS,使用没有后退按钮刷新的路由

    我在用着angularJS使用 AJAX 构建一个简单的单页应用程序 但是当用户使用本机后退按钮时我遇到了问题 angular module myApp ionic myApp controllers myApp services conf
  • 如何使用 TypeScript 和 Angular 2 将插件添加到 ng2-ckeditor ?

    我正在尝试添加Justify插件到我的 ckeditor 但不幸的是我找不到任何关于如何将插件添加到 ng2 ckeditor 的信息 另外 我找不到任何应该添加插件的目录或配置文件 我正在使用 ng2 ckeditor1 0 6使用 Ty
  • 使用 Angular JS ng-src 的后备(默认)图像

    我正在尝试使用从模式返回的数据设置图像源 这是在 ng repeat 循环内 div div span table tr td class imgContainer img td tr table span div div
  • 函数调用后的两组括号

    我正在寻找如何filters http docs angularjs org api ng 24filter在 Angularjs 中工作 我发现我们需要发送 2 组括号 filter number number fractionSize
  • 当我的网页上有一个持续时间计数器时,AngularJS 有什么帮助吗?

    我有一个使用 Angular ui router 的应用程序 当路由器设置为某种状态时 我希望将计时器设置为例如 2 小时 当它设置为另一个状态时 我想让计数器倒计时 我希望在屏幕上显示剩余时间 有谁有关于如何实现此功能的代码示例吗 如果有
  • AngularJS 插值错误

    我正在显示房间的属性 作为我正在开发的房间管理应用程序的一部分 这是输出 如您所见 Beamer 英文投影仪 的值为 Sony lamp 01 12 2013 此输出是正确的 但当我打开控制台时 我看到一些有关插值的错误 更大的分辨率 Ca
  • 如何删除 ng-repeat 的默认顺序

    如何停止动态表数据的 ng repeat 内部的默认排序 目前我收到以下订单 地址 客户 ID 姓名 但我想要的是以下顺序 客户 ID 名称 地址 任何帮助我将不胜感激 JS app controller MyController func
  • 单元测试依赖注入

    我对茉莉花和业力是全新的 我相信我的环境设置正确 并且我能够运行非常基本的单元测试 但是一旦我尝试实例化控制器 我就会收到未知提供程序错误 并且我不确定如何调试它 我需要传入 stateProvider 依赖项吗 我在角种子示例中没有看到这
  • 在角度控制器中监听文档事件

    如何捕获角度控制器中的事件 我有文档级事件 所以我需要在角度控制器中捕获事件 这可能吗 Update 我有独立的 js 文件来处理来自相机的一些操作 document addEventListener myCameraEvent handl
  • 当请求新页面时,如何将 AngularJS 路由与 Express (Node.js) 结合使用?

    我正在使用 Express 它从静态目录加载 AngularJS 一般情况下我会要求http localhost 其中 Express 为我服务index html以及所有正确的 Angular 文件等 在我的 Angular 应用程序中
  • 如何销毁角度工厂实例

    一方面 我有几个工厂 每个工厂都控制一个 websocket 另一方面 其中一个工厂应该在客户端登录时启动 因此 if user isLogged injector get NotificationsWebsocket 这就是我动态初始化工
  • CORS 在 jquery 中工作正常,但在 angularjs 中不行

    我的服务器端是php mysql 我正在另一个域的 Web 服务中进行 Ajax 调用 其中启用了 的访问控制 var postUrl http logical brains com elance clone test login php
  • 如何在量角器中模拟拖放动作?

    我有一个双滑块 我想测试它是否可操作并返回正确的数据 滑块有一个最小和一个最大处理程序 它还有一些 我可以挂钩的断点 我想要模拟的是 handler max 元素的 touchStart 将拇指移动到类为 step 3 的元素上 handl
  • Angular.js:如何从无序列表中获取 orderBy 或过滤器来工作?

    尝试根据价格和评级 在返回的对象中 进行排序 我宁愿用 ng click 和 li 来代替使用选择菜单 有没有办法做到这一点 我环顾四周 这是我能想到的最接近的 ul class restaurant filter li i class i
  • 如何清除单个函数中的所有 AngularJS $scope 和 $rootScope 值?

    我需要清除所有 scope执行某些操作时的值 例如 如果我点击 Signout 按钮重定向到 signin 页面 然后所有 scope or rootScope应清除会话中的值 我怎样才能实现这个目标 您可以执行以下操作 rootScope
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下

随机推荐