在AngularJS中如何使用datalist

2024-02-15

<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,控制台,输出 http://jsbin.com/jifibugeke/1/edit?html,js,console,output

上面提到了使用 angularjs 的数据列表示例代码和 URL,这里我的问题是我在文本框中输入的内容,在控制器中添加添加每个单词,在我的数据列表中的要求中,选定的详细信息仅显示在控制器中,


//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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在AngularJS中如何使用datalist 的相关文章

  • 如何将 HTML 表格转换为 csv 格式?

    是否有 HTML 解析器或某些库可以自动将 HTML 表格转换为 CSV 数据行 Here is http www unix com shell programming scripting 45274 html table csv html
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • 如何为 ng-repeat orderBy 创建回调?

    寻找一种方法让 AngularJS 的 ng repeat orderBy 过滤器在完成渲染后执行回调 Markup div table thead tr th Name th th Age th tr thead tbody tr tr
  • 响应式菜单:悬停子菜单显示错误

    简而言之 我根据教程创建了一个响应式菜单 当您将鼠标悬停在投资组合按钮上时 菜单应该显示子菜单 而在移动模式下 您需要按该按钮才能显示子菜单 效果很好 问题是该教程有一个错误 如果您在桌面模式下按组合按钮 子菜单将不会再次显示 除非您按 单
  • 如何在 jQuery 中检查复选框是否被选中?

    我需要检查checked复选框的属性 并使用 jQuery 根据选中的属性执行操作 例如 如果age复选框被选中 然后我需要显示一个文本框来输入age 否则隐藏文本框 但下面的代码返回false默认情况下 if isAgeSelected
  • 如何对 bootstrap-3 分页进行编程以处理简单的 HTML 内容

    我正在 新闻 部分工作 并尝试使用 jquery 使 bootstrap 3 分页工作 分页的 HTML
  • mailto:相当于电话的链接? [复制]

    这个问题在这里已经有答案了 有没有办法使用 html 和 或 JS 链接图像以便拨打电话 类似于 mailto 链接 如果可能的话 这只会让生活变得更加轻松 假设如果一个人有 Skype 是否可以通过一个按钮为他们打开 Skype 并拨打电
  • 智能位置表单字段

    我的用户注册表单上有一个文本字段location 我本质上希望这个字段能够根据 Google 地图 或同等地图 进行验证 只允许有效位置通过 最好采用类似的格式滑铁卢 伦敦 or 伦敦 英国 要求 除了位置名称之外 我还想返回该位置中心的坐
  • 如何使用 javascript 触发表单验证的本机验证气泡/工具提示?

    我有一个附加了 html5 验证 必需 等 属性的表单 有没有一种方法可以触发本机验证气泡 工具提示的出现 而无需模拟表单的提交按钮上的 单击 正如评论中所述 您可以使用 reportValidity 方法 这是广泛支持 https dev
  • AngularJS 指令 - 设置多个指令元素的顺序(不是指令的优先级,而是元素的优先级)

    考虑带有指令 foo 的标记 div div div div div div 使 foo 按指定顺序而不是从上到下 3 1 2 运行的好方法是什么 我唯一能想到做的就是跟踪已运行的内容并在不按顺序的项目上返回 false 然后让 Angul
  • 为什么连字符 (-) 分隔的类名在 CSS 中广泛使用 [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在浏览了一些网站和其他一些广泛使用的插件和框架中包含的一些 CSS 文件时 发现它们广泛使用连字符分隔的单词作为类名 实际上使用这样的类名有什么
  • 调整离子卡中的图像大小

    我想显示一组图像 并在下面说明 我选择使用 Ionic 卡 我得到这个结果 第一张图片 虽然我想保留现在的相同布局 并添加描述 这是我的代码
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 具有固定位置的平滑滚动标题

    当我将位置更改为固定时如何创建平滑滚动 我尝试添加动画但不起作用 最好使用jquery动画 window scroll function var sticky mobile menu scroll window scrollTop if s
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • 在 Apache 服务器上将特定的 .htm 页面处理为 .php [重复]

    这个问题在这里已经有答案了 我正在为 Apache 服务器编程 并且只需要将一个特定的 html 页面 例如 first htm 作为 PHP 脚本进行处理 可以设置吗 SetHandler http httpd apache org do
  • 如何使用 Angular Kendo UI 刷新网格数据源

    我使用 Angular Kendo UI 项目将 Telerik Kendo 网格与 Angular 结合起来 我有以下标记 div style height 600px div 以及我的控制器中的以下代码 scope thingsOpti
  • 从 html 页面和 javascript 调用 java webservice

    我正在尝试从 javascript 调用 java 实现的 Web 服务 使用 NetBeans IDE 我读过很多关于 jQuery 和 AJAX 的内容 但我似乎无法掌握它 假设我的 Web 服务 WSDL 位于 http localh
  • 为 Gmail 设计 HTML 电子邮件

    我正在生成一封使用内部样式表的 html 电子邮件 即 h2 class foo Email content here 在 Gmail 中查看时 内部样式表中的所有样式似乎都被忽略 Gmail 似乎忽略了内联规则以外的所有样式 例如 h2
  • 快速响应的交互式图表/图形:SVG、Canvas 还是其他?

    我正在尝试选择正确的技术来更新一个项目 该项目基本上在可缩放 可平移的图表中渲染数千个点 当前使用 Protovis 的实现性能不佳 在这里查看 http www planethunters org classify http www pl

随机推荐

  • 如何将公式转换为析取范式?

    说给定一个公式 t1 gt 2 或 t2 gt 3 且 t3 gt 1 我希望得到它的析取范式 t1 gt 2 且 t3 gt 1 或 t2 gt 3 且 t3 gt 1 在Z3中如何实现这一点 Z3没有将公式转换为DNF的API或策略 然
  • 使用 python 访问 HDInsight Hive

    我们有一个 HDInsight 集群 其中包含 HIVE 中的一些表 我想从客户端计算机 Azure 外部 的 Python 3 6 查询这些表 我尝试过使用PyHive pyhs2并且impyla但我遇到了所有这些问题 有没有人有一个访问
  • C 在结构体中初始化数组

    我想要在结构中包含一个可变长度数组 但在正确初始化它时遇到问题 struct Grid int rows int cols int grid int main struct Grid testgrid 1 3 4 5 6 我尝试的所有操作都
  • Elasticsearch 6.2 中的精确匹配、不区分大小写的匹配,无需标准化

    我查看了我能找到的关于执行完全匹配 不区分大小写的查询的每一篇文章和帖子 但在实现后 它们并没有执行我正在寻找的内容 在将此问题标记为重复之前 请阅读整篇文章 给定一个用户名 我想查询我的 Elasticsearch 数据库以仅返回与用户名
  • 两个相关 for 循环的复杂度,外层循环的复杂度为 log n

    问题 计算该算法的复杂度 for i n i gt 1 i i 2 for j i j
  • Laravel 默认 auth 模块翻译

    我已经生成了默认的 Laravel auth 模块 在模块刀片的各处 我都看到双下划线 假设翻译即将完成的函数 例如 li a class nav link href Login a li 我的问题 翻译文件在哪里 如果我创建一个 我应该把
  • Django 表单下拉字段中的占位符

    我对 django 形式的下拉字段有一个小问题 我想添加到此字段占位符 或不作为占位符的第一个选项 和一些其他内容 如无标签 类等 我写了这样的东西 在我的forms py但现在我的表单已损坏 不要将值保存到数据库中 from models
  • noexcept 在派生类中的用法

    我在使用时遇到问题noexcept派生类上的说明符 更准确地说 当父类是抽象类时 具有protected构造函数 以下是我声明类的方式的示例 With a public基类中的构造函数 一切正常 与相同的代码protected并且派生类不再
  • 协程中的热流和冷流是什么以及它们之间的区别?

    我正在掌握 Kotlin 协程并试图弄清楚 1 什么是热流和冷流 2 它们之间的主要区别是什么 3 什么时候使用每一个 冷流在开始收集值之前不会开始产生值 另一方面 热流立即开始产生值 我建议阅读以下内容以了解热蒸汽和冷蒸汽的使用 http
  • 如何删除 Windows Phone 8.1 应用程序中的动态磁贴标题?

    我正在 BackgroundTask 中使用 TileWide310x150Image 模板构建一个宽动态图块 它应该只显示宽图像 不显示文本或其他内容 这是我正在使用的模板
  • 如何预分配和初始化 `std::basic_string` 内的字符序列?

    我想知道如何在普通 C 字符串中预分配和初始化字符序列 提出这个问题的场合是查询 Windows 注册表中的值 看这个答案 https stackoverflow com a 16304707 1794538一些示例代码 问题在于系统调用写
  • 如何以编程方式对黑/白 UIImageView 进行着色?

    我有一组黑白图像 如下所示 如果我没记错的话 有某种方法可以设置 UIImage 的混合或遮罩属性以将其与背景 UIView 混合 在这种情况下 我想将该图像的颜色更改为红色以表示生命值 如何以编程方式更改此 UIImage 的颜色 我知道
  • 用于多行文本的 Java 注释实用程序

    WRT 多行 Java 字符串的任何未来计划 https stackoverflow com questions 11659225 any future plans for multiline java string 编写一个执行以下操作的
  • Python文件下载

    我遇到了问题 不确定这是否可能 所以是否有人可以指出我正确的方向 我需要从网页打开一个文件 在 Excel 中打开它并保存该文件 我在网站上遇到的问题是文件名有一个文件名 不是活动链接 然后它会有一个 下载 按钮 该按钮不特定于我需要下载的
  • 为什么 .tfignore 根本不起作用?

    我按照中的说明进行操作这篇微软文章 https www visualstudio com docs tfvc add files server customize which files are ignored by version con
  • Oracle:将 IPv4 地址转换为数字?

    如何将点十进制格式的 IPv4 地址转换为数字 例如 地址39 255 2 51应转换为4026466867 使用 regexp substr 提取地址的四个八位字节 通过将八位位组移回其原始位置来重构该值 正则表达式可能相对昂贵 因此如果
  • 如何在一个EC2实例上运行多个应用程序?

    这可能与这个问题有关 如何在一个 EC2 实例上运行多个应用程序 https stackoverflow com questions 16549026 how to run more than one app on one instance
  • Gradle 包装器标签不匹配错误

    我正在尝试使用 gradle 及其包装器手动配置 Android 项目 但我总是遇到相同的错误 我可以生成gradlew脚本如下build gadle file buildscript repositories jcenter depend
  • sqlite3 运行 sql - 选择所有带有 PUA 字符的

    我怎样才能运行 SELECT FROM 表名 其中列包含 PUA 字符 PUA https en wikipedia org wiki Private Use Areas 私人使用区域 在 Unicode 中 专用区域 PUA 是一系列代码
  • 在AngularJS中如何使用datalist

    div div