6

mobile-angular-ui (角度 + ブートストラップ) でアプリを開発しています。私のログイン ページでは、ユーザーは資格情報 (ユーザー名とパスワード) を覚えておくことができます。ユーザーのデータは localStorage に保存されます。

それはうまくいきます。データリストを使用して、ログイン ページにユーザーをロードできます。

<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 を使用できないことです。値を入力に渡すには、オプション + 値を使用する必要があります。

<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 オブジェクトを渡すことができないため、item.username を渡す必要があります。

何か案が？実際にはbootstrap3で非推奨になっているため、または他のライブラリ/ js/cssを追加するため、typeaheadを使用したくありません。angularとhtmlのみを使用してそれを行いたいと思います。

私のコントローラー：

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

userMemoList は、{"username":"admin", "password":"admin"}, ... のようなオブジェクトの配列です。

ありがとう。

4

2 に答える 2

3

次のように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>
于 2014-08-12T05:42:15.353 に答える