我对 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
提前致谢。
您所描述的行为是由浏览器完成的,并不能保证在所有情况下都有效。实际上很容易做到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(使用前将#替换为@)