angularjs形成输入建议

时间:2014-03-23 11:48:20

标签: javascript php forms angularjs

我对angularjs中的表单有问题。

经典html& amp;示例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>

在第二次访问时,表格根本没有任何建议,这非常令人恼火。

有没有解决方法?

实施例

suggestion

提前感谢。

2 个答案:

答案 0 :(得分:4)

您所描述的行为是由浏览器完成的,并不保证在所有情况下均可使用。在 AngularJS 中实际上很容易做到;只需跟踪共享状态对象。这可以通过多种方式完成,最简单的方法是使用value provider,如下所示:

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

现在注入这个对象在处理这样的表单的控制器中:

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进行编程时隐藏的宝石之一,因为它允许您保存非常复杂的状态信息,这在以前是非常不切实际的。

Live demo can be found in this plunker.

修改

使自动完成工作的一种方法是维护 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>

Live demo can be found in this plunker.

答案 1 :(得分:1)

只需在输入标记中添加此属性autocomplete="off"

即可