我正在使用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>
Run Code Online (Sandbox Code Playgroud)
我可以选择我想要的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>
Run Code Online (Sandbox Code Playgroud)
我可以使用ng-change ="theSelectedUserIs(item)",但是我无法传递item对象,因为datalist与用户名输入有关,所以我需要传递item.username.
任何的想法?我不想使用typeahead,因为实际上在bootstrap3中已弃用或添加了其他库/ js/css.我想只使用angular和html.
我的控制器:
$scope.userMemoList = JSON.parse(localStorage.getItem('userList'));
var user = {}; …Run Code Online (Sandbox Code Playgroud)