Html datalist does not support ng-options: how to pass an object

Question

I am developing an application on a angular -ui mobile device (angular + bootstrap). On my login page, users can remember their credentials (username and password). User data is stored in localStorage.

It works great. I can upload users to 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> 

I can select the item.username I want, but I can not select the appropriate item.password. My problem is that the datalist is not working as select, and I cannot use ng-options. I have to use the value of option + 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> 

I could use ng-change = "theSelectedUserIs (item)", but I cannot pass the item object because the datalist is associated with entering the username, so I need to pass item.username.

Any idea? I do not want to use typeahead because it is actually deprecated in bootstrap3 or is adding other / js / css libraries. I would like to do this only with angular and html.

My controller:

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

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

Thanks.

Answer 1

You can also pass with html data-id this way

---

in angular js file

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

---

In your opinion

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

Answer 2

This is how I solved this problem in my application. Use for wrapping.

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