html-datalist-keine Unterstützung für ng-options: how to pass-Objekt

Entwickle ich eine app im mobile-angular-ui (Winkel+bootstrap).
In meiner login-Seite, können die Benutzer daran erinnern, Ihre Anmeldeinformationen (Benutzername und Kennwort). Nutzer-Daten ara gespeichert in "localStorage".

Das funktioniert auch. Ich kann load-Benutzer in meiner login-Seite mit 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>

Kann ich wählen Sie das Element aus.username ich will, aber ich bin nicht in der Lage, wählen Sie das entsprechende Element.Passwort.
Mein problem ist, dass datalist funktioniert so nicht wählen, und ich kann ng-Optionen. Ich habe mit option+Wert mein Wert an den Eingang.

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

Ich wäre in der Lage, einen ng-change="theSelectedUserIs(item)", aber ich bin nicht in der Lage, das Element-Objekt, da die Datenliste ist in Bezug auf die Benutzernamen-Eingabe, so muss ich-pass-Element.Benutzername.

Irgendeine Idee?
Ich will nicht zu verwenden, typeahead, weil Sie tatsächlich veraltet ist, in bootstrap3, oder fügen Sie weitere Bibliotheken/js/css.
Ich würde das gerne machen, dass nur mit Winkel-und html-Format.

Mein controller:

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

userMemoList ist ein array-Objekt wie:
{"username":"admin", "password":"admin"}, ...

Dank.

InformationsquelleAutor daniel_ | 2014-04-16

  1. 3

    Du kannst auch mit html-Daten-id, wie so

    in Ihrem angular js-Datei

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

    Ihrer Ansicht

    //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>
    können Sie bitte endgültige jsfiddle

    InformationsquelleAutor Aye Mon Chit

  2. 2

    Dies ist, wie ich dieses problem in meiner app. Verwenden Sie zu wickeln . 

    <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>
    Ich habe versucht, und im Safari zeigt es, kleine <select> dropdowns unter my search bar. Es muss nicht dieses Verhalten in Firefox, Chrome oder Edge-soweit ich das sehen konnte.
    datalist wird nicht unterstützt in safari.caniuse.com/#search=datalist

    InformationsquelleAutor minisand

Schreibe einen Kommentar