我开发的移动角度的用户界面的应用程序（角+引导）。在我的登录页面，用户可以记住他们的凭据（用户名和密码）。用户的数据ARA保存在localStorage的。

I'm developing an app in mobile-angular-ui (angular+bootstrap). In my login page, users can remember their credentials (username and password). Users' data ara saved in the localStorage.

这工作正常。我可以使用DataList控件加载用户在我的登录页面：

That works fine. I can load users in my login page using datalist:

<form name="userForm">
    <div class="form-group" ng-class="{ 'has-error' : submitted && userForm.username.$invalid && !userForm.username.$pristine }">
        <label for="inputEmail" class="control-label">Username</label>
            <input type="text" class="form-control" id="inputEmail"
                           name="username" ng-model="user.username" list="UserMemoList"
                            required>
    </div>

    <datalist id="UserMemoList">
        <option ng-repeat="item in userMemoList track by $index" ng-click="setChange(item)"
                             value="{{item.username}}" >
        </option>
    </datalist>

我可以选择我想要的item.username，但我不能够选择相应的item.password。我的问题是，DataList控件并不像选择工作，我不能用NG选项。我不得不使用选项+值我的价值传递给输入。

I can select the item.username I want, but I'm not able to select the corresponding item.password. My problem is that datalist doesn't work like select, and i cannot use ng-options. I have to use option+value to pass my value to the input.

<div class="form-group" ng-class="{ 'has-error' : submitted && userForm.password.$invalid && !userForm.password.$pristine }">
    <label for="inputPassword" class="control-label">Password</label>
    <input name="password" type="password" class="form-control" id="inputPassword"
                           ng-model="user.password" required>
</div>

我将能够使用NG-变化=theSelectedUserIs（项目），但我不能够通过项目对象，因为DataList控件是关系到用户名输入，所以我需要通过item.username

I would be able to use a ng-change="theSelectedUserIs(item)", but I'm not able to pass the item object, because datalist is related to the username input, so I need to pass item.username.

你知道吗？我不想使用预输入，因为实际上是bootstrap3 pcated德$ P $或添加​​其他库/ JS / CSS。我想这样做，只有采用了棱角分明和HTML。

Any idea? I don't want to use typeahead because actually is deprecated in bootstrap3 or add other libraries/js/css. I would like to do that only using angular and html.

我的控制器：

$scope.userMemoList = JSON.parse(localStorage.getItem('userList'));
var user = {};
LoginService.setUser(user);

userMemoList就像对象的数组：    {用户名：管理，密码：管理}，...

userMemoList is an array of object like: {"username":"admin", "password":"admin"}, ...

感谢。

推荐答案

这是我在我的应用程序解决了这个问题。使用包。

This is how I solved this problem in my app. Use to wrap .

<input class="input form-control" placeholder="Search Conf by Application ID"
                                   list="app_ids" ng-model="confs_app_id"/></th>
                            <datalist id="app_ids">
                                <select>
                                    <option ng-repeat="app in app_list" value="{{app}}"></option>
                                </select>
                            </datalist>