Angularjs:选中单选按钮

2023-12-25

我正在尝试使用单选按钮在 AngularJS 中构建一个颜色配置器,一切似乎都正常,数据绑定等......但是我无法设置选中的默认颜色单选按钮。正如我在文档中看到的,如果 ng-model 与 radio 值相同,则应该自动检查输入,但我不知道这是否只适用于字符串而不适用于对象。

这是 HTML:

<div ng-app ng-controller="ThingControl">
    <ul >
        <li ng-repeat="color in colors">
            <input type="radio" ng-model="thing.color" value="{{color}}" />{{ color.name }}
        </li>
    </ul>
    Preview: {{ thing }}
</div> 

这是 JS:

function ThingControl($scope){
    $scope.colors = [
        { name: "White", hex: "#ffffff"},
        { name: "Black", hex: "#000000"}
        ]

    $scope.thing = {
        color: $scope.colors[1]
    }

}

您可以在这个小提琴中看到前面的示例:http://jsfiddle.net/xWWwT/1/ http://jsfiddle.net/xWWwT/1/

首先十分感谢!


选择是匹配的string在 Value 中定义,所以你可以这样做

value="{{color.name}}"

$scope.thing = {
    color: $scope.colors[1].name
}

or

value="{{color}}"

$scope.thing = {
    color: JSON.stringify($scope.colors[1])
}

正如@bertez提到的,使用ng-value是最好的解决方案。

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

Angularjs:选中单选按钮 的相关文章

  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 如何创建一个多重过滤函数来过滤掉多个属性?

    我有一个要过滤的对象数组 name Apple age 24 model Android status Under development name Roboto age 24 model Apple status Running 我需要使
  • Angular.js:未捕获的错误,没有模块:myapp

    我也在尝试引导 angular js 项目 这是我的index html div p Loading p div
  • BUG - 在 IOS 中没有选择标签的完成按钮

    我正在使用最新的离子并有一个简单的选择标签
  • 如何在 JS Rails 响应中包含 HTML?

    我有一个响应 HTML 和 JS AJAX 查询的 FooController app controllers foo controller rb class FooController lt ApplicationController l
  • JavaScript 中的正则表达式用于验证十进制数字

    我想要 JavaScript 中的正则表达式来验证十进制数字 它最多只允许两位小数 例如 它应该允许10 89但不是10 899 它还应该只允许一个句点 例如 它应该允许10 89但不是10 8 9 尝试使用以下表达式 d d 0 2 如果
  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • 使用 javascript 将 html 文本渲染为位图,无需服务器端代码

    我需要使用 javascript 代码来转换 html 中的文章 帖子 以便最终用户以位图的形式查看 有没有办法在没有服务器端代码的情况下做到这一点 example p testing text here p 您可以使用例如html2can
  • Child_process 处理带有回车符 (\r) 的 STDOUT 流

    我正在编写一个简单的应用程序 它允许工作中的内部系统请求从远程服务器到使用 REST 调用发起的另一个远程服务器的复制过程 使用 rsync 我已经对express框架足够熟悉 并且刚刚开始尝试child process库 并偶然发现了一个
  • 从指令动态地将角度属性添加到元素

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

    我正在尝试将 OpenLayers 设置为在缩放开始之前不显示矢量图层 并使其在缩放结束后重新出现 我已经像这样建立了缩放结束部分 map new OpenLayers Map map element eventListeners zoom
  • 使用 javascript 禁用按钮:FF 与 IE

    我有一排按钮 它们都会创建一个我想在新选项卡中打开的 pdf 文件 这样按钮页面就会保持在顶部 并且 pdf 会打开以进行打印 为了防止单击按钮两次 我禁用该按钮 如下所示 我使用 python
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • 覆盖函数(例如“警报”)并调用原始函数?

    我想用调用原始版本的新版本覆盖 Javascript 内置函数 类似于用调用的版本覆盖类上的方法 super有多种语言版本 我怎样才能做到这一点 例如 window alert function str do something addit
  • 嵌套辅助函数和性能

    嵌套辅助函数对于使代码更易于理解非常有用 谷歌甚至建议在他们的应用程序中使用嵌套函数时尚指南 https google styleguide googlecode com svn trunk javascriptguide xml Nest
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 如何查看网站浏览者的操作系统?

    我运行的是 Ubuntu 8 04 最近在访问网站时收到以下错误 请使用运行 Windows 98 2000 Me NT 或 XP 的计算机返回 www site com 网站如何知道我正在运行哪个操作系统 是仅通过 javascript
  • D3v6 嵌套图 - 嵌套 join()?

    我想可视化每个节点的 孩子 洞察力 我猜 D3v6 join 函数可以嵌套 不幸的是我找不到任何例子 下面的代码片段包含一个具有 3 个节点和子节点作为属性的outerGraph 到目前为止 这些孩子还没有被使用 相反 innerGraph
  • 在角度控制器中监听文档事件

    如何捕获角度控制器中的事件 我有文档级事件 所以我需要在角度控制器中捕获事件 这可能吗 Update 我有独立的 js 文件来处理来自相机的一些操作 document addEventListener myCameraEvent handl

随机推荐

  • python随机鼠标移动

    我想在指定的矩形区域 坐标x1 y1 x2 y2 x3 y3 x4 y4 进行随机鼠标移动 运动应该是平滑的 随机的 而不仅仅是直线 在指定的时间内随机上 下 左 右 等 您能给我一个可以学习的例子吗 非常感谢 此代码仅适用于 Window
  • 按大小扭曲日志旋转/对文件总数有上限?

    我有一个扭曲的服务器 它生成日志文件并根据大小轮换它们 如果特定文件的文件大小超过 1MB 则会创建新的日志文件 然而 运行几天后 日志文件开始填满我的硬盘 有没有办法对日志轮换进行总体限制 该限制可能基于总大小 例如仅 200GB 的日志
  • 将 Visual Studio C++ 移植到 Linux

    我们有一个不是很复杂但是big 即大量文件 Visual Studio C Win32 控制台在 VS2010 中以 C 0x 标准编写 它不使用任何非标准代码或任何东西 希望如此 我现在想把它移植到 Linux 上 哪种方法是最快的方法
  • 如何让 Angular 5 等待 Injectable 构造函数中使用的 Promise 在构造依赖项或 ngOnInit 之前解析?

    我的 Angular 5 项目中有一个服务 它保存一些配置状态 Injectable export class FooService isIncognito boolean null constructor I want Angular t
  • 代码到接口原则是否适用于实体类?

    我正在尝试在项目中遵循代码到界面 我应该首先创建一个接口 然后为实体类实现该接口吗 我认为这可能使接口优先的方法走得太远 应该忽略实体 这就是我的意思 public interface Address public String getSt
  • Swift 中的类型强制问题

    编辑 这在 Swift 3 中工作得非常好 我们现在都应该使用它了 如果我有两个协议 X and Y where Y实施X 为什么我不能分配一个数组Y到一个类型的变量 X 更奇怪的是 我可以将它一一转换为 X 数组 并且编译得很好 prot
  • R 中不平衡面板上的简单移动平均线

    我正在处理不平衡 间隔不规则的横截面时间序列 我的目标是获得 数量 向量的滞后移动平均向量 并按 主题 分段 换句话说 假设对Subject 1观察到以下数量 1 2 3 4 5 我首先需要将其滞后 1 得到 NA 1 2 3 4 然后我需
  • Python colorama 不适用于输入?

    今天终于让 colorama 工作了 在打印字符串时它工作得很好 但是当我尝试在输入中使用 colorama 时 我遇到了每个人似乎都会遇到的常见错误 这是我的代码 launch input Fore GREEN Launch attack
  • Android 上没有 ToolBar 可以制作视差效果吗? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我花了很长时间 也在寻找第三方库 来制作某种 视差 但没有Toolbar 我所看到的只是与Toolbar 但这不符合我的最佳利益 因为我删除
  • 有效 JSON 是否为 null(4 字节,没有其他内容)

    今日热议 是文本流null有效的 JSON 根据http www ietf org rfc rfc4627 txt number 4627 http www ietf org rfc rfc4627 txt number 4627 2 JS
  • 在 Prisma 中创建或更新一对多关系

    我正在尝试更新 Prisma 中的一对多关系 我的架构看起来像这样 model A User id Int id username String age Int bio String db VarChar 1000 createdOn Da
  • Identity Server 4 (2.0) 不读取 Asp.Net Core Identity cookie

    我正在尝试使用Asp Net 身份核心 https learn microsoft com en us aspnet core security authentication identity tabs visual studio 2Cas
  • Google Cloud Dataflow 可以在没有外部 IP 地址的情况下运行吗?

    在扩大 Google Cloud Dataflow 的使用范围时 我们注意到 我们将开始耗尽正在使用的 IP 地址的配额 我们知道请求增加配额是一种选择 并且已经这样做并已获得 CPU 的批准 但想知道是否 或将要 可以在没有外部 IP 地
  • 将 Backbone 模型与 AngularJS 结合使用

    最近我在思考 Backbone js 和 AngularJS 之间的异同 我发现 Backbone 中真正方便的是 Backbone Models 和 Backbone Collections 您只需设置 urlRoot 然后通过 Ajax
  • Github CLI 添加另一个遥控器并使用它

    我在 Github CLI 第一个版本发布后就开始使用它 这是一个很棒的工具 我一直在从事一个项目 该项目需要远程位于不同的地方 例如在两个存储库中 我可以添加另一个遥控器来推送更改 但 gh 只能控制第一个遥控器 举个例子 gh pr s
  • 基于 INF 的打印机驱动程序的 WIX 安装程序

    我正在尝试使用 WIX 制作打印机驱动程序的安装程序 I have 一些DLL cat 文件 gdp 文件 inf 文件 我正在考虑使用INF来部署驱动程序 但不知道如何实现 I sow 这个问题 https stackoverflow c
  • 避免 ORA-00955: 名称已被现有对象使用

    我正在 sql 文件中创建如下表 每次有新文件要处理时都会调用该表 因此 每当有新文件出现时 我都会删除该表并再次创建并加载 当我从 shell 脚本调用此表时 该表被删除并成功创建 但与此同时我收到如下错误 知道如何避免这种情况 ERRO
  • 函数中的多个等待

    我在 JS 承诺方面遇到了一些困难 我正在使用一个库从 Spotify 中提取返回承诺的数据 在我的主函数中 我可以使用await从响应数据构建一个对象并将其推送到一个数组 称为节点 var nodes main async functio
  • 将集合中的字段加载到选择字段中并根据所选值对其进行过滤

    基本上我有两个相关的问题 但我会用数字将它们分开 1 我试图将单个字段加载到集合中的选择下拉框中 但它填充了从下面的列表中收集的所有重复值 而不是它自己的帮助器
  • Angularjs:选中单选按钮

    我正在尝试使用单选按钮在 AngularJS 中构建一个颜色配置器 一切似乎都正常 数据绑定等 但是我无法设置选中的默认颜色单选按钮 正如我在文档中看到的 如果 ng model 与 radio 值相同 则应该自动检查输入 但我不知道这是否