带有简单数组初始化的 ng-options

2024-04-21

我对 Angular 有点困惑ng-options.

我有一个简单的数组,我想用它初始化一个选择。但是,我想要选项值=标签。

脚本.js

$scope.options = ['var1', 'var2', 'var3'];

html

<select ng-model="myselect" ng-options="o for o in options"></select>

我得到什么:

<option value="0">var1</option>
<option value="1">var2</option>
<option value="2">var3</option>

我想要的是:

<option value="var1">var1</option>
<option value="var2">var2</option>
<option value="var3">var3</option>

所以我尝试:

<select ng-model="myselect2" ng-init=0 ng-options="options[k] as v for (k,v) in options"></select>

<select ng-model="myselect3" ng-init=0 ng-options="b as b for b in options"></select>

(但没有成功。)

Edit:

我的表单是从外部提交的,这就是为什么我需要“var1”作为值而不是 0。


实际上,您在第三次尝试中就正确了。

 <select ng-model="myselect" ng-options="o as o for o in options"></select>

请参阅此处的工作示例:http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview http://plnkr.co/edit/xEERH2zDQ5mPXt9qCl6k?p=preview

诀窍是 AngularJS 无论如何都会将键写为从 0 到 n 的数字,并在更新模型时转换回来。

因此,HTML 看起来不正确,但在选择值时模型仍会正确设置。(即 AngularJS 会将 '0' 翻译回 'var1')

Epokk 的解决方案也有效,但是如果您异步加载数据,您可能会发现它并不总是正确更新。当范围更改时,使用 ngOptions 将正确刷新。

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

带有简单数组初始化的 ng-options 的相关文章

  • 动态加载的输入框不执行任何操作

    所以我有一些 html 会根据用户所在的 QuestionNumber 动态加载到 panel div 中 这不是全部代码 而是我认为的所有相关代码 无论如何
  • 以角度访问窗口 TemplateUrl 内的范围

    我的模式有一个 windowTemplateUrl 如下 div class modal fade div class modal dialog div class modal content square btn div div div
  • 从角度 $uibModal 背景单击返回数据

    我正在尝试从 uibModal 传回一个值 如果用户单击模式的关闭按钮 我可以定义返回 scope close function modalInstance close scope editMade 但如果用户单击背景区域 这将不起作用 如
  • Elasticsearch 跨多个索引搜索 - 忽略不存在的索引

    我有弹性集群 其中我的索引包含当前日期 例如 example idex 2016 07 26 gt exists example idex 2016 07 25 gt exists example idex 2016 07 24 gt do
  • 自定义指令链接中的 element.replaceWith 仅在第一次调用时有效

    我是 Angularjs 的新手 不太了解幕后的情况 基本上我想创建一个 E 扭结指令 基于控制器中的数据 我动态创建html 就像整个 表 一样 以替换该指令 我的 html 文件中的指令是这样的
  • Angular Material 日期选择器选择的默认日期

    这对我的日期选择器有帮助 http demo agektmr com datalist 现在在这个date picker我想要默认选择今天的日期 谁能帮我如何设置默认日期 谢谢 在我用过的有角材料中this http demo agektm
  • 如何处理并不总是返回承诺的函数?

    处理函数并不总是返回 Promise 的情况的最佳方法是什么 我的实际代码太复杂 无法解释 但问题的本质归结为检查条件 根据它 我要么返回一个局部变量 要么需要发送一个 ajax 请求 像这样的事情 function example val
  • 如何像在 jQuery 中一样在 AngularJS 中触发事件?

    是否可以做类似的事情 container trigger click 仅使用 AngularJS 如果不可能trigger 还有其他方法来管理这种行为吗 我有一个基本示例 可以在单击按钮时创建一个框 创建的框是可拖动的 现在 用户必须单击按
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • AngularJS:遍历嵌套数组

    我正在使用具有以下结构的嵌套数组 scope items attr1 val1 attr2 val2 items attr1 val1 attr2 val2 items 这进入一个ng repeat with ng include像这样 d
  • angularjs ui-router:获取给定状态的子状态列表

    您知道 ui router 中获取给定状态的子状态列表的方法吗 我正在使用 ui router 实现一个复杂的 SPA 可能有 4 级深度导航 我想实现从路由器表自动生成的第二级导航选项卡界面 为此 我需要获取给定状态 可能是抽象状态 的直
  • 如何在 e2e AngularJS 测试中进行文件上传?

    在我的一种观点中 我有一个文件上传控件 它支持通过拖放或单击按钮后打开的标准文件对话框上传文件 How to do this in my e2e tests1 1 Just one of the two options will be en
  • 使用谷歌分析处理带有哈希#的网址

    我正在使用 javascript 客户端 mvc 开发一个 js 单页 Web 应用程序 在本例中为 angular js 我在网站上添加了谷歌分析 但从目前我所看到的 至少是实时的 来看 谷歌没有考虑哈希后的 uri 部分 那就是我有一个
  • Angularjs $http 似乎不理解响应中的“Set-Cookie”

    我有一个带有 Passport 模块的 Nodejs Express REST api 用于身份验证 登录方法 GET 在标头中返回一个 cookie 当我从 Chrome 调用它时 它工作正常 我的 cookie 已在我的浏览器中设置 但
  • 为什么 AngularJS 指令(属性等)在 WebStorm 8 中显示为“无效”?

    我几个小时前刚刚安装了 WebStorm 8 我一直在写一些 AngularJS 的东西 但我有一个相当烦人的小问题 AngularJS 插件似乎只能部分工作 每当我输入 ng 时 我都会收到一个智能感知弹出窗口 其中显示所有各种 ng 属
  • 使用 AngularJS 动态加载 Google 地图 API

    我正在尝试使用 AngularJS 加载 Google Maps API 以及该部分的控制器 search controller GoogleMaps scope sce function GoogleMaps scope sce var
  • AngularJS 无限滚动大量数据

    所以我尝试使用 AngularJS 创建一个无限滚动表 类似于 http jsfiddle net vojtajina U7Bz9 http jsfiddle net vojtajina U7Bz9 我遇到的问题是 在 jsfiddle 示
  • Angular 1.5 组件的自定义指令

    我已经升级到 Angular 1 5 现在支持 component helper 方法致力于帮助用户过渡到 AngularJs 2 不幸的是 关于它的教程并不多 我有以下简化的自定义指令和模板 URL 谁能帮我写这个 component 形
  • 为什么 Angular (1.5) 组件总是有一个隔离的范围?

    我正在构建一个 Angular 库 它提供了一堆组件 这些组件应该可以更轻松地在特定 API 之上构建 SPA 应用程序 对于某些组件 我们使用多槽嵌入功能 AngularJS 1 5 版本中引入了多槽嵌入和组件 我真的很喜欢这两个功能 但
  • 如何在打字稿中使用外部js

    我通过 Typescript 代码生成 Angular JS 代码 在一种情况下 我需要将外部 JS 文件添加到我的打字稿文件中 并且需要访问 js 文件中的类 我像这样添加js文件

随机推荐