Html 在 AngularJS 中如何使用 datalist
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29531889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In AngularJS how to use datalist
提问by Anandha Mariappan A
<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>
Controller
控制器
function cntryController($scope) {
$scope.LoadSessionData = function(val) {
console.log(val);
};
}
check this Link http://jsbin.com/jifibugeke/1/edit?html,js,console,output
检查此链接http://jsbin.com/jifibugeke/1/edit?html,js,console,output
Above mention datalist sample code and URL using angularjs, here my problem is what ever i am typing the text box, in controller add by added every words,in my requirement in datalist selected details only shows in controller,
上面提到使用 angularjs 的数据列表示例代码和 URL，这里我的问题是我在输入文本框时输入的内容，在控制器中添加每个单词，在我的数据列表要求中，选择的详细信息仅显示在控制器中，
回答by Anandha Mariappan A
//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>
回答by Herno
This is right way for 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" and where the name, id and ng-model are placed.
观察 type="text" 以及放置名称、id 和 ng-model 的位置。
That will work with angular without any javascript additional function.
这将适用于没有任何 javascript 附加功能的 angular。
