angularjs形成输入建议 [英] angularjs form input suggestions

问题描述

我在angularjs一个形式的问题。

I have a problem with a form in angularjs.

与传统的HTML＆放例; PHP

Example with classic 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>

如预期其中工程。在第二次访问，我提交表单的第一次后，我只需要输入第一个字母，输入字段会建议一些基于第一篇文章。

which works as expected. On the second visit, after i submitted the form for the first time, i just need to type the first letter and the input field will suggest something based on the first post.

同样的形式，棱角分明。

The same form in angular.

    <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>

在第二次访问这里的形式将建议什么都没有，这是很让人讨厌。

On the second visit here the form will suggest nothing at all, which is very irritating.

有没有修复是什么？

示例

先谢谢了。

推荐答案

你描述是由浏览器完成的，并不能保证在所有情况下工作的这种行为。它实际上是相当容易的 AngularJS 的做;只要保持轨道的共享状态对象。这可以通过几种方式来进行，其中最容易通过使用值提供商的是这样的：

That behaviour you're describing is done by the browser and is not guaranteed to work in all situations. It's actually quite easy to do in AngularJS; just keep track of a shared state object. This can be done in several ways, the most easiest by using the value provider like this:

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

现在注射的这个对象在被处理的形式是这样的控制器：

Now inject this object in the controller that is handling the form like this:

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;
});

渲染的形式为你做，你会看到表单的状态保持。事实上，这是角编程的时候，因为它可以让你保持非常复杂的状态信息，这是隐藏的宝石之一previously pretty不切实际的。

Render the form as you did and you'll see that the state of the form is kept. In fact, this is one of the hidden gems when programming with Angular since it allows you to keep very complex state information, which was previously pretty impractical.

现场演示可以在这个plunker找到。

要获取自动完成工作的方法之一是要保持的的DataList 的元素。就在previous输入的值存储在数组中，并使用 NG-重复渲染所有选项。与使用列表属性和找你的好去DataList控件关联的input元素。

One way to get the autocomplete to work is to maintain datalist elements. Just store the previous entered values in an array and use a ng-repeat to render all the options. Associate the input element with the datalist using the list attribute and you'r good to go.

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

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

现场演示可以在这个plunker找到。

这篇关于angularjs形成输入建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！