在 AngularJS 中如何使用 datalist答案

【问题标题】：In AngularJS how to use datalist在 AngularJS 中如何使用 datalist
【发布时间】：2015-06-14 10:17:22
【问题描述】：

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

控制器

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

查看此链接http://jsbin.com/jifibugeke/1/edit?html,js,console,output

上面提到了使用 angularjs 的 datalist 示例代码和 URL，这里我的问题是我输入的文本框，在控制器中添加通过添加每个单词，在我的 datalist 中选择的详细信息只显示在控制器中，

【问题讨论】：

这里是关于 Datalist 和 AngularJS 的一些信息：htmlcssjavascript.com/javascript/…

标签： html angularjs html-datalist

【解决方案1】：

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

【讨论】：

是爱！！！比 HTML5 之前的所有可能替代方案简洁 10,000 倍。真的很棒，谢谢！！！并在 IE 中工作：O
这很好，但您实际上不需要传递 SelectedDoctor，因为您可以从 $scope.LoadSessionData 访问 $scope.SelectedDoctor

【解决方案2】：

这是角度的正确方法：

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

观察 type="text" 以及 name、id 和 ng-model 的放置位置。

这将适用于没有任何 javascript 附加功能的 angular。

【讨论】：