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.
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>
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>
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.
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.
My controller:
$scope.userMemoList = JSON.parse(localStorage.getItem('userList'));
var user = {};
LoginService.setUser(user);
userMemoList is an array of object like: {"username":"admin", "password":"admin"}, ...
Thanks.
You can also pass with html data-id like so
// 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>