html datalist 不支持 ng-options：如何传递对象答案

【问题标题】：html datalist not support ng-options: how to pass objecthtml datalist 不支持 ng-options：如何传递对象
【发布时间】：2014-05-31 12:23:04
【问题描述】：

我正在使用 mobile-angular-ui (angular+bootstrap) 开发应用程序。在我的登录页面中，用户可以记住他们的凭据（用户名和密码）。用户数据ara保存在localStorage中。

效果很好。我可以使用 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 不像 select 那样工作，我不能使用 ng-options。我必须使用 option+value 将我的值传递给输入。

<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-change="theSelectedUserIs(item)"，但我无法传递 item 对象，因为 datalist 与用户名输入相关，所以我需要传递 item.username .

有什么想法吗？我不想使用预输入，因为实际上在 bootstrap3 中已弃用或添加其他库/js/css。我想只使用 angular 和 html 来做到这一点。

我的控制器：

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

userMemoList 是一个对象数组，例如： {"用户名":"admin", "密码":"admin"}, ...

谢谢。

【问题讨论】：

标签： angularjs html-datalist

【解决方案1】：

这就是我在应用程序中解决此问题的方法。用来包裹。

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

【讨论】：

我试过了，在 Safari 中，它在我的搜索栏下显示了小的
数据列表在 safari 中不受支持。caniuse.com/#search=datalist

【解决方案2】：

你也可以像这样使用 html data-id 传递

在你的 Angular js 文件中

// when input name textbox change, check the value is same with datalist value or not. If value same, then bind that item.password to angular password model.
$scope.$watch "user.username", (newValue) -> 
    if newValue != null && newValue.lenght > 0 
        $("#locationlist option").each (index) ->
            if $(this).val() == newValue
                $scope.user.password = $(this).data("id") // this line will set your password text field

在你看来

// pass user password via html5 (data-id) element like below
<datalist id="UserMemoList">
    <option ng-repeat="item in userMemoList track by $index" ng-click="setChange(item)"
                             value="{{item.username}}" "data-id" = {{item.password}} >
    </option>
</datalist>

【讨论】：