html - 在 AngularJS 中如何使用数据列表

标签 html angularjs html-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>

Controller

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

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

上面提到了使用 angularjs 的数据列表示例代码和 URL,这里我的问题是我在文本框中输入了什么,在 Controller 中添加了每个单词,在我的数据列表中选择的详细信息的要求只显示在 Controller 中,

最佳答案

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

关于html - 在 AngularJS 中如何使用数据列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29531889/

相关文章:

html - 在不破坏我当前 CSS 的情况下制作图标可点击的 url

html - <a> 不以 block 格式显示

html - 根据其下单问题定位div

html - Bootstrap 列在移动 View 中未对齐

javascript - 在 AngularJs 中加入两个对象

javascript - React.js 是否支持 HTML5 数据列表?

angularjs - 按钮在 ngRepeat 中无法正常工作

javascript - $window 打开多个被弹出窗口阻止的链接

javascript - 如何清除HTML数据列表当前选项?

javascript - 没有 jQuery 且带有链接的自动完成下拉列表