Angular UI Select2,为什么 ng-model 被设置为 JSON 字符串?

2024-05-21

我使用 Angular-ui 的 select2 来实现相当简单的下拉菜单。它由位于我的控制器范围内的静态数据数组支持。在我的控制器中,我有一个在下拉列表的 ng-change 上调用的函数,以便我可以在值更改时执行一些操作。

然而,我发现 ng-model 的属性被设置为 JSON 字符串而不是实际的 javascript 对象,这使得无法使用点表示法从该模型中获取属性。

这是处理下拉列表值更改的函数:

$scope.roleTypeChanged = function() {
  //fine:
  console.log('selectedType is: ', $scope.adminModel.selectedType);

  // this ends up being undefined because $scope.adminModel.selectedType is a 
  // JSON string, rather than a js object:
  console.log('selectedType.typeCode is: ', $scope.adminModel.selectedType.typeCode);
}

这是我的完整示例的一个例子:http://plnkr.co/edit/G39iZC4f7QH05VctY8zG http://plnkr.co/edit/G39iZC4f7QH05VctY8zG

我以前从未见过绑定到 ng-model 的属性这样做,但是我对 Angular 也相当陌生,所以很可能我只是在这里做错了什么。我当然可以执行类似 $.parseJSON() 的操作将 JSON 字符串转换回对象,但除非必须,否则我宁愿不这样做。 谢谢你的帮助!


如果你想拥有对象值,你需要在选择上使用 ng-options 。实际上使用 ng-repeat 自己创建选项只会允许您拥有各种选项的字符串值:

<select ui-select2
    ng-model="adminModel.selectedType"
    ng-change="roleTypeChanged()"
    data-placeholder="Select Role Type" ng-options="type.displayName for type in adminModel.roleTypes">
  <option value=""></option>
</select>

http://plnkr.co/edit/UydBai3Iy9GQg6KphhN5?p=preview http://plnkr.co/edit/UydBai3Iy9GQg6KphhN5?p=preview

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

Angular UI Select2,为什么 ng-model 被设置为 JSON 字符串? 的相关文章

  • 即使我改变了图像,图像也没有改变

    在 angularjs 中 如果我更改或删除图像 它不会进行任何更改 刷新页面后 它显示更改后的图像 我使用以下行删除图像 jQuery profile image val 如果您想了解更多信息 此示例是基本的AngularJs https
  • Angular - UI 路由器路由 - HTML5 模式

    我正在尝试在我的 Angular 应用程序中使用 HTML5 推送状态链接 我拥有的是一系列类似于以下的路线 stateProvider state product url product productCode templateUrl p
  • 刷新页面时保留页面数据

    我是角度新手 我正在使用一项服务 该服务获取对象列表并将其显示在第一页上 然后根据单击的对象 我在下一页上设置选项卡标题 但是 当我刷新页面时 列表的范围丢失 并且选项卡标题引发异常 导致页面不显示信息 即使刷新第二页 是否有任何方法可以保
  • 使用 Angular JS 调用 Restful API 时的跨域问题

    我正在尝试访问一个宁静的 API 这会产生错误 如何解决这个跨域问题 错误是 Access Control Allow Origin header is present on the requested resource function
  • Select2 触发器(“更改”)创建无限循环

    假设页面上有两个 select2 元素 都使用 onChange 为了以编程方式在一个 select2 元素中设置一个值 您可以使用 id1 val xyz trigger change 如果您在这两个元素之一中进行选择时想要将另一个元素重
  • 如何在 AngularJS 中设置选择选项中的文本格式?

    我有以下 json 对象 scope values id 2 code Code 1 name Sample 1 id 4 code Code 2 name Sample 2 id 7 code Code 3 name Sample 3 在
  • 使用 angularjs 为多选下拉列表分配默认值

    我正在使用这个插件http dotansimha github io angularjs dropdown multiselect http dotansimha github io angularjs dropdown multisele
  • AngularJS 中的非单例服务

    AngularJS 在其文档中明确指出服务是单例 AngularJS services are singletons 违反直觉的是 module factory还返回一个 Singleton 实例 鉴于非单例服务有很多用例 实现工厂方法以返
  • 在 Karma+AngularJS 测试中加载模拟 JSON 文件

    我有一个 AngularJS 应用程序 使用 Karma Jasmine 设置了测试 我想测试一个函数 它接受一个大型 JSON 对象 将其转换为应用程序其余部分更容易使用的格式 然后返回转换后的对象 就是这样 对于我的测试 我希望您有单独
  • 如何在Select2选项中添加图像?

    我有一个选择
  • 如何使用 TypeScript 和 Angular 2 将插件添加到 ng2-ckeditor ?

    我正在尝试添加Justify插件到我的 ckeditor 但不幸的是我找不到任何关于如何将插件添加到 ng2 ckeditor 的信息 另外 我找不到任何应该添加插件的目录或配置文件 我正在使用 ng2 ckeditor1 0 6使用 Ty
  • 访问指令的范围与嵌入内容隔离

    我不确定这是否真的可能 但我本质上想要 AngularJS 中 隔离范围的反转 这里有一个Plunkr http plnkr co edit 3xL5MrdJSfYH22ivkYJS展示 基本上 我设置了一个自定义指令来提供一些可重用的 H
  • 将行推入使用 ng-repeat 以角度呈现的表格中

    当客户端单击该行时 我想在表中插入额外的行 不应预取数据 因为我预计最多有 30 行 但每行都有关联的数据 在一次获取中获取这些数据是不合理的 到目前为止 我的方法是使用 ng repeat 迭代我的集合并渲染表格 当客户端按下该行时 客户
  • 函数调用后的两组括号

    我正在寻找如何filters http docs angularjs org api ng 24filter在 Angularjs 中工作 我发现我们需要发送 2 组括号 filter number number fractionSize
  • 当我的网页上有一个持续时间计数器时,AngularJS 有什么帮助吗?

    我有一个使用 Angular ui router 的应用程序 当路由器设置为某种状态时 我希望将计时器设置为例如 2 小时 当它设置为另一个状态时 我想让计数器倒计时 我希望在屏幕上显示剩余时间 有谁有关于如何实现此功能的代码示例吗 如果有
  • 为什么在这个函数定义中像这样使用“window.angular”?

    我正在尝试理解一个我需要用来与 Django 集成的 angularjs 文件 它有一个我不熟悉的奇怪语法 请记住我是一名初级开发人员 所以这可能是你的面包和黄油 它是这样的 function angular undefined use s
  • 选择器的内部文本

    我尝试从此标记中获取内部文本 span class ng binding ng scope Displaying results 1 25 of 17 430 span 使用此选择器 document querySelectorAll di
  • 如何删除 ng-repeat 的默认顺序

    如何停止动态表数据的 ng repeat 内部的默认排序 目前我收到以下订单 地址 客户 ID 姓名 但我想要的是以下顺序 客户 ID 名称 地址 任何帮助我将不胜感激 JS app controller MyController func
  • 单元测试依赖注入

    我对茉莉花和业力是全新的 我相信我的环境设置正确 并且我能够运行非常基本的单元测试 但是一旦我尝试实例化控制器 我就会收到未知提供程序错误 并且我不确定如何调试它 我需要传入 stateProvider 依赖项吗 我在角种子示例中没有看到这
  • 从指令动态地将角度属性添加到元素

    我正在尝试构建一个指令来更改缓慢的 ajax 调用按钮上的加载状态 基本上 这个想法是为按钮元素设置一个属性 ng loading 并让指令添加其余的内容 这是html代码

随机推荐

  • 如何从 JavaScript 调用 ASSX?

    我想调用一个 ASHX 文件并从 JavaScript 传递一些查询字符串变量 并将返回字符串获取到 JavaScript 中的字符串中 我该怎么做 ASHX 文件已被编码为response write 一个基于查询字符串的字符串 像这样的
  • Rails:在任何源中都找不到并发 ruby​​-1.0.5 (Bundler::GemNotFound)

    我已经用谷歌搜索了很多 但没有发现任何对我的情况有用的东西 docker compose up abc 在日志中生成以下内容 usr lib ruby vendor ruby bundler spec set rb 92 in block
  • C 预处理器中的宏评估

    我想做这样的事情 define NUM ARGS 2 define MYMACRO0 no args define MYMACRO1 one arg define MYMACRO2 two args define MYMACRO num M
  • C++ 为伪随机数生成器生成良好的随机种子

    我正在尝试为伪随机数生成器生成一个好的随机种子 我想我应该得到专家的意见 让我知道这是否是一个不好的方法或者是否有更好的方法 include
  • 如何编写一个计算表达式生成器来累积值并允许标准语言构造?

    我有一个计算表达式生成器 可以随时生成值 并且有许多自定义操作 但是 它不允许标准 F 语言构造 并且我在弄清楚如何添加此支持方面遇到了很多麻烦 举一个独立的例子 下面是一个非常简单且毫无意义的构建 F 列表的计算表达式 type Item
  • 如何动态改变描边颜色?

    抱歉我的语言不通 我是法国人 我需要改变stroke color形状的 我有同样的问题描述here https stackoverflow com questions 16775891 how to change solid color f
  • jQuery:查找文本并替换为 HTML

    我尝试查找并替换文本 使用 jQuery 实际上我正在尝试在文本周围添加一个 span 元素 我还应该能够再次删除跨度而不会丢失里面的文本 例如 假设我有以下情况 span This is a span element span 我希望能够
  • jquery:焦点到 div 不起作用

    ajax功能结束后 在成功消息中 我关注特定的 div 但这不起作用 我的代码在这里 j ajax url type POST data action press release page 0 do task do task id id m
  • SSIS 文件系统任务错误:分配给变量的值的类型...与当前变量类型不同

    好的 我有一个相对简单的SSIS 包 DTSDesigner100 Visual Studio 2008 版本9 0 30729 4462 QFE NET Framework 3 5 SP1 在包的 SSIS 控制流的末尾是文件系统任务这是
  • 使用 STL 容器进行 boost::interprocess::driven_shared_memory

    考虑以下情况 class Helper public Getters and setters are present private int i std map
  • 为什么pip找不到winrt?

    我刚买了一台新笔记本电脑 我正在尝试用 python 设置它 我正在使用 python 3 10 0 windows 10 pip v21 3 在大多数情况下 pip 似乎工作正常 我已经使用它来安装多个软件包 例如 pygame 但是 当
  • 如何仅添加一个BottomNavigationBarItem

    我有一个 BottomNavigationBar 我只需要在其中添加一个集中按钮 但我收到此错误 package flutter src material bottom navigation bar dart 断言失败 第 191 行 po
  • 更改组合框下拉列表边框的颜色

    My code Private Sub ComboBox2 DrawItem sender As Object e As DrawItemEventArgs Handles ComboBox2 DrawItem If e Index lt
  • 从名字和姓氏生成唯一的用户名?

    我的数据库中有很多用户 我想将他们的所有用户名重置为他们名字的第一个字母 加上他们的完整姓氏 正如你可以想象的那样 有一些骗子 在这种情况下 我想在用户名末尾添加 2 或 3 或其他内容 我将如何编写查询来生成这样的唯一用户名 UPDATE
  • CALayer 抗锯齿不如 UIView 抗锯齿

    我一直在尝试使用 CALayer 制作圆形绘图的动画 一切都运行良好 但问题是 绘制的圆不够抗锯齿 它的边界有点太粗糙 或者如果使用光栅化则模糊 抗锯齿已启用 还尝试过 边缘抗锯齿遮罩 kCALayerLeftEdge kCALayerRi
  • XHR 不起作用,因为“Access-Control-Allow-Origin 不允许来源”

    我正在使用 Rails 3 开发一个 API 服务器 到目前为止 它非常方便 但我一直遇到错误 我不确定这是因为我的 Apache 设置还是 Rails 应用程序 当我尝试执行 HTTP DELETE 或 PUT 请求时http sampl
  • 如何在views.py中检查用户的权限?

    在我的 Django 站点上的views py 文件中 我有一个基于类的视图 需要根据用户的权限更改变量 所以如果用户有pro view许可 然后它看到一件事 否则如果有basic view然后它看到另一个 我怎样才能在我的内部访问它get
  • PHP 换行符 (\n) 不起作用

    由于某种原因我无法使用 n使用 PHP 输出到文件时创建换行符 上面只写着 n 到文件 我尝试使用 n 同样 它只写 n 如预期 但我一生都无法弄清楚为什么在字符串中添加 n 不会创建新行 我也尝试过 r n但它只是附加 r n 到文件中的
  • 如何在 C# 中使用 Outlook MAPI 打开 .eml 文件?

    我有一个 C 应用程序 可以读取 msg 文件并提取正文和附件 但是当我尝试加载 eml 文件时 应用程序崩溃了 我正在加载这样的文件 MailItem mailItem MailItem outlookApp CreateItemFrom
  • Angular UI Select2,为什么 ng-model 被设置为 JSON 字符串?

    我使用 Angular ui 的 select2 来实现相当简单的下拉菜单 它由位于我的控制器范围内的静态数据数组支持 在我的控制器中 我有一个在下拉列表的 ng change 上调用的函数 以便我可以在值更改时执行一些操作 然而 我发现