angularjs表单输入建议

2023-12-14

我对 AngularJS 中的表单有疑问。

经典 html 和 php 示例

    <form name="myForm" action="post.php" method="post" autocomplete="on">
        <input name="namename" type="text" />
        <input name="email" type="text" />

        <input name="submit" type="submit" value="submit" />
    </form>

其按预期工作。在第二次访问时,在我第一次提交表单后,我只需要输入第一个字母,输入字段就会根据第一篇文章提出建议。

有角度的形式相同。

    <form name="myForm" ng-submit="test(user)" autocomplete="on">
        <input name="name" type="text" ng-model="user.name" autocomplete="given-name" />
        <input name="email" type="text" ng-model="user.email" />

        <input name="submit" type="submit" value="submit" />
    </form>

第二次访问这里时,表格将没有任何提示,这非常令人恼火。

有什么解决办法吗?

Example

suggestion

提前致谢。


您所描述的行为是由浏览器完成的,并不能保证在所有情况下都有效。实际上很容易做到AngularJS;只需跟踪一个共享状态对象。这可以通过多种方式完成,最简单的方法是使用价值提供者像这样:

// Create an injectable object with the name 'userInput'
angular.module('myApp').value('userInput', {});

Now inject控制器中的这个对象正在处理如下形式:

angular.module('myApp').controller('MyController', function($scope, userInput) {
  // Assign the state object to the scope so it's available for our view
  $scope.user = userInput;
});

像您一样渲染表单,您将看到表单的状态得到保留。事实上,这是使用 Angular 编程时隐藏的瑰宝之一,因为它允许您保留非常复杂的状态信息,而这在以前是相当不切实际的。

可以在这个插件中找到现场演示。

Edit

让自动完成功能发挥作用的一种方法是维护datalist元素。只需将之前输入的值存储在数组中并使用ng-repeat渲染所有选项。使用以下方法将输入元素与数据列表关联起来list属性,你就可以开始了。

<input list="nameHistory" type="text" ng-model="user.name" />

<datalist id="nameHistory">
  <option ng-repeat="item in userHistory.name" value="{{ item }}"></option>
</datalist>

可以在这个插件中找到现场演示。

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

angularjs表单输入建议 的相关文章

随机推荐

  • 循环,每次迭代仅在 jQuery 延迟之后发生,何时/然后可能没有递归?

    我想在循环中调用 jQuery 延迟函数 但每次迭代都应该等待上一个迭代使用延迟函数完成when function num of iterations var arr for var i 1 i lt num of iterations i
  • 将鼠标悬停在文本上时显示工具提示

    我想创建扩展 当我将鼠标悬停在文本上时 该扩展允许显示自定义消息 例如 test text 应该给出工具提示 OK 而不是当前的 ITrackin 我试着跟随https learn microsoft com en us visualstu
  • Visual Studio - 不同的断点集

    在 Visual Studio 2015 及更高版本 中 是否可以拥有多组断点 我有几个场景 我需要调试 但对于每个场景 我希望有不同的断点集 手动启用 禁用它们非常耗时 您可以从断点窗口导出和导入断点 然后根据需要导入它们 或者 如果您不
  • 有没有办法通过 .onLongPressGesture 将第三个切换选项添加到开/关状态?

    我已经设置了一个切换开关 如下图所示 可以打开 关闭图像或通过 失败 我正在尝试使用长按手势向图像添加第三种状态 这会将图像变成带有斜杠图标的灰色 我已经在文本元素中实现了这一点 因为 at is 没有 bool 条件 但经过多次搜索后无法
  • 创建未刷新的文件输出缓冲区

    我正在尝试解决在 Linux 上运行的几个不同语言的程序中未刷新的文件 I O 缓冲区出现的问题 刷新缓冲区的解决方案很简单 但是未刷新缓冲区的问题是随机发生的 我对如何创建 重现 和诊断这种情况感兴趣 而不是寻求可能导致这种情况的帮助 这
  • 使用 Selenium WebDriver 进行 PrimeFaces 文件上传测试

    我已经成功测试了 fileUploadSimplehttp www primefaces org showcase ui fileUploadSimple jsf使用 webElement sendKeys 方法 它不适用于自动上传 有没有
  • 使用 JSON 对象作为负载向 REST API 发出 POST 请求

    我正在尝试使用具有 JSON 负载的 POST 请求从 REST API 获取 JSON 响应 应在发送前转换为 URL 编码文本 我已经按照一些教程来实现该过程 但收到状态代码 400 的错误 我可能没有对给定的 JSON 字符串进行编码
  • 如何在 iframe 上设置“X-Frame-Options”?

    如果我创建一个iframe像这样 var dialog div align center div dialog 如何使用 JavaScript 修复以下错误 拒绝展示 https www google com ua gws rd ssl 在
  • 执行 chrome.extension.getBackgroundPage() 时抛出错误

    我正在开发我的第一个扩展 并尝试创建一个简单的扩展来在页面上注入可拖动的 div 这很好用 但我想保留 div 在后台页面上的位置 我也在尝试本地存储 但想了解为什么这不起作用 我不需要按钮 因此没有创建 popup html 文件 我相信
  • XPath 查找节点是否存在

    使用 XPath 查询如何查找节点 标签 是否存在 例如 如果我需要确保网站页面具有正确的基本结构 例如 html body and html head title
  • 联邦学习训练期间模型性能没有提高

    我已关注这个emnist教程创建图像分类实验 7 个类别 目的是使用 TFF 框架在 3 个数据孤岛上训练分类器 在训练开始之前 我使用以下命令将模型转换为 tf keras 模型tff learning assign weights to
  • openapi java 生成器将 LocalDate 序列化为数组而不是完整日期

    我在 spring 项目中使用 OpenAPI java 生成器 1 和 library resttemplate dateLibrary java8 从规范生成客户端 对于规范中的属性 targetDate type string for
  • 如何在 launch.json 的 Visual Studio Code 中反转 ${relativeFile} 中的反斜杠?

    我正在尝试配置 Windows Visual Studio Codelaunch json推出jest测试当前文件 获取我使用的路径 relativeFile 变量给出一个带有反斜杠的字符串 如下所示 src services some s
  • 为什么unique_ptr重载reset(pointer p = point())和reset(nullptr_t)?

    根据http en cppreference com w cpp memory unique ptr reset void reset pointer ptr pointer template lt class U gt void rese
  • exec() 和变量范围[重复]

    这个问题在这里已经有答案了 我确信这个问题已经被问过并得到回答 但我找不到具体的 我刚刚开始学习Python 但我不明白变量作用域问题 我已将问题简化为以下内容 Case 1 def lev1 exec aaa 123 print lev1
  • dart-server/angulardart 和 CORS 的问题

    我在我的服务器上使用 dart 并使用 angulardart 作为我的客户端 我可以通过我的服务器上的 http get 请求数据 工作正常 但我无法让 POST 工作 服务器 服务器使用 开始 https github com lviv
  • Grails 中按关联计数排序

    我有很多 Topic 对象 每个 Topic 有很多帖子 Post 如何根据帖子数对所有主题对象进行排序 您可以使用 size 函数在一个 HQL 查询中完成此操作 这样您就可以在一个查询中获取 Topic 实例 SELECT topic
  • 设置带有 a-frame 的加载动画

    我正在使用框架加载全景照片 示例代码如下 加载照片时会显示白屏 并持续几秒钟 这会造成糟糕的用户体验 我想在加载照片时添加加载动画 但找不到任何有用的指南 有人可以帮忙吗
  • 如何在没有 APD 的情况下覆盖现有的 PHP 函数?

    我想覆盖 PHP 中已经声明的几个函数 我正在使用的应用程序充满了遗留代码 包括对eval 因此仅替换代码中调用函数的标识符可能还不够 是否可以更改已声明的函数 而不使用高级 PHP 调试器在 PHP5 中 是的 通过使用 runkit f
  • angularjs表单输入建议

    我对 AngularJS 中的表单有疑问 经典 html 和 php 示例