html datalist pas en charge ng-options: comment passer de l'objet

Je suis le développement d'une application mobile-angular-ui (angulaire+bootstrap).
Dans ma page de connexion, les utilisateurs peuvent se souvenir de leurs informations d'identification (nom d'utilisateur et mot de passe). Les données des utilisateurs de l'ara enregistré dans le localStorage.

Qui fonctionne très bien. Je peux charger les utilisateurs dans ma page de connexion à l'aide de 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>

Je peux sélectionner l'élément.nom d'utilisateur que je veux, mais je ne suis pas en mesure de sélectionner l'élément correspondant.le mot de passe.
Mon problème est que datalist ne fonctionne pas comme choisir, et je ne peux pas utiliser ng-options. J'ai utiliser l'option+valeur à transmettre ma valeur à l'entrée.

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

Je serais en mesure d'utiliser un ng-changement="theSelectedUserIs(item)", mais je ne suis pas en mesure de passer à l'élément de l'objet, car datalist est lié à l'utilisateur d'entrée, j'ai donc besoin de passer de l'élément.nom d'utilisateur.

Une idée?
Je ne veux pas utiliser typeahead parce qu'en fait, est obsolète dans bootstrap3 ou ajouter d'autres bibliothèques/js/css.
Je voudrais le faire qu'en utilisant angulaire et html.

Mon contrôleur:

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

userMemoList est un tableau d'objet, comme:
{"nom":"admin", "mot de passe":"admin"}, ...

Grâce.

OriginalL'auteur daniel_ | 2014-04-16

  1. 3

    Vous pouvez également passer avec html data-id comme

    dans votre angular js fichier

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

    de votre point de vue

    //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>
    pouvez-vous veuillez donner des finales de travail jsfiddle

    OriginalL'auteur Aye Mon Chit

  2. 2

    C'est comment j'ai résolu ce problème dans mon application. Utiliser pour envelopper . 

    <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>
    J'ai essayé cela, et dans Safari, il montre les petites <select> listes déroulantes sous ma barre de recherche. Il n'a pas ce problème dans Firefox, google Chrome, ou le Bord d'aussi loin que je pouvais dire.
    datalist n'est pas pris en charge dans safari.caniuse.com/#search=datalist

    OriginalL'auteur minisand