web-dev-qa-db-fra.com

Dans AngularJS, comment utiliser datalist

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>

<div ng-app="" ng-controller="cntryController">
    <input list="testList" type="" ng-model="SelectedDoctor" ng-change="LoadSessionData(SelectedDoctor)" />
    <datalist id="testList">
        <option value="Dr.Test1" ng-selected="selected"></option>
        <option value="Dr.Test2"></option>
        <option value="Dr.Test2"></option>
    </datalist>
</div>

Manette

function cntryController($scope) {
    $scope.LoadSessionData = function(val) {
        console.log(val);
    };
}

vérifier ce lien http://jsbin.com/jifibugeke/1/edit?html,js,console,output

Au-dessus de mentionner l'exemple de code et d'URL de datalist utilisant angularjs, mon problème est de savoir ce que je saisis dans la zone de texte, dans le contrôleur ajouté en ajoutant tous les mots, dans mon exigence dans le dataliste. 

15
user4277191
//here your html
<div ng-app="myapp1" ng-controller="cntryController">
    <input list="testList" type="" ng-model="SelectedDoctor" ng-change="LoadSessionData(SelectedDoctor)" />
    <datalist id="testList">
        <option ng-repeat="x1 in names" value="{{x1.drname}}">
    </datalist>
</div>

//here your script        
<script>
    var app=angular.module('myapp1',[]);
    app.controller('cntryController',function ($scope) {
//data for ng-repeat
    $scope.names=[{'drname':'Dr.Test1'},{'drname':'Dr.Test2'},{'drname':'Dr.Test3'}]
    $scope.LoadSessionData = function(val) {
//console log
        console.log(val);
    }
});
</script>
23

C'est la bonne façon pour angular:

<input list="Calle" type="text" ng-model="xCalle"  >
    <datalist name="Calle" id="Calle" >
        <option value="11 DE SEPTIEMBRE DE 1888">
        <option value="12 DE OCTUBRE">
    </datalist>

Watch type = "text" et où le nom, id et ng-model sont placés.

Cela fonctionnera avec angular sans aucune fonction supplémentaire javascript.

1
Herno