使用 ng-repeat 时默认选中单选按钮

2024-03-30

我一直想使用 ng-repeat 从屏幕上显示的单选按钮列表中签出一个单选按钮,但我的代码不起作用。这就是我正在做的:

<div class="clubRole" data-ng-if="club.checked">
    <div data-ng-repeat="role in securityGroups.slice(0,1)">
        <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode" checked="checked"> {{role.description}}
    </div>
    <div data-ng-repeat="role in securityGroups.slice(1,securityGroups.length+1)">
        <input type="radio" class="clubRole" data-ng-model="club.role" data-ng-value="role.securityGroupCode"> {{role.description}}
    </div>      
</div>

该代码的目的是选中第一个单选按钮,而不选中其他单选按钮。该代码有一个问题:它不起作用。但至少它给出了我想要做的事情的想法:我希望默认选中一个单选按钮,无论它是哪一个。


将检查单选按钮的输入属性值是否等于应用于单选按钮的模态值。

 <div ng-repeat="val in ['a','b','c']">
     <input
            type="radio"
            name="val"
            data-ng-model="role" 
            data-ng-value="val"
            ng-init="$index==0?(role=val):''"
      />
     {{val}}
 </div>

Checked="checked" 在角度上下文中不起作用。您可以在控制器中显式设置单选按钮的值,也可以在视图本身中管理它,就像我在上面的示例中所做的那样。但是模态应该根据输入元素上的 value 属性相等。

例如,如果三个单选按钮上的模态为 x,并且每个单选按钮具有不同的值,如 a、b 和 c。那么 x 必须等于任何要检查的值。

Plunker http://plnkr.co/edit/zihMeNkV8gqRLMiIfp7a?p=preview

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

使用 ng-repeat 时默认选中单选按钮 的相关文章

  • 在 jQuery 中,如果我有一个开始类和结束类,我如何用 div 包装多个元素

    好的 这里有一些 html 我有一些开始和结束课程 但为此我只添加了每门课程 1 门 div span nbsp span div div span nbsp span div div class start lt start span n
  • 如何在 *ngFor 中停止属性绑定到 Angular 中的每个元素

    在我的 html 中 我想将属性绑定应用于每个元素 我有一个点击和悬停事件 每当用户 将鼠标悬停或单击单个元素 但现在悬停或 单击发生在其中的每个元素上 ngFor 我想要它只 发生在他们选择 悬停的元素上 我需要什么 改变 我看到了另一个
  • 如何使用 ui-router 获取带有参数的先前状态

    问题陈述 我有一个 添加评论 按钮 只有当我登录系统时我才应该能够添加评论 但问题是我登录后无法返回 添加评论 页面 因为我不知道之前的状态或无法获取之前的状态 有没有更清洁的解决方案 我应该将登录页面设置为模态页面而不是新页面吗 我已经看
  • 如何创建具有动态数量的网格列的 TailwindCSS 网格?

    我正在使用 Vue3 和 TailwindCSS 并希望创建一个具有动态的网格grid cols n 班级 我知道 TailwindCSS 默认情况下最多支持 12 列 但我无法自定义主题 因为列的数量完全是动态的 给出以下纯 HTML J
  • 具有多种类型属性的 HTML5 输入

    我们的表单软件输出所有带有 type text 的元素 但我宁愿利用 HTML5 中的新类型 例如 电子邮件 数字 等 我可以在最后添加这些 但最终会得到多个类型属性 例如
  • iframe 内 Web 元素的 QuerySelector

    编辑 新标题 我正在寻找的是 iframe 内元素的 document querySelector 我已经用谷歌搜索了很多答案 最后我被难住了 我正在尝试在 iframe 内查询 我正在构建要在 Selenium 中使用的字符串选择器 通常
  • Wordpress Divi 主题 - 锚链接打开选项卡切换

    我正在尝试获取锚链接以打开特定页面上的选项卡 当我位于选项卡所在的页面上并单击锚链接时 它会正确滚动到选项卡并打开它 但是 如果我位于与选项卡所在的页面不同的页面上 则锚链接只会进入该页面 不会打开选项卡 URL http elkodown
  • SVG 内部跨度与文本不在同一行

    我在一个跨度内有一个 SVG 文件 同时包含文本 文本和 SVG 的高度相同 但是 SVG 与文本不在同一行 相关jsfiddle https jsfiddle net tcrnjd53 https jsfiddle net tcrnjd5
  • 有没有办法用异步数据更新过滤器

    我已经构建了下一个角度过滤器 App filter cur2symbol CurrenciesService function CurrenciesService return function input iso input input
  • “forms.ContactForm 对象”没有属性“hidden_​​tag”

    我正在尝试使用 Flask 创建联系表单 但在渲染页面时不断收到此错误 forms ContactForm object has no attribute hidden tag 这是我的文件 联系方式 html extends layout
  • 需要参考$log.log调用行号

    当我使用 Angular log 服务时 控制台中的所有行都会显示对 angular js 5687 的引用 而不是我调用 log log 函数的行 如何获得对我调用 log 的行的引用 另外 我有自己的围绕 log 的服务 如何引用对我的
  • Html 视频播放器播放声音但不播放视频

    我正在制作网页 并尝试插入视频 视频播放器加载正常 您可以按播放 但只播放音频 而不播放视频 在 Chrome 中预览时 在 firefox 中查看时可以正常工作 我的代码如下
  • 如何使用 CSS 使表格中的分隔线/边框消失?

    我有一个简单的 HTML 表格 我希望分隔线 边框 消失 所需的最终结果是一个除了实际文本之外不可见的表格 我尝试将 border 属性设置为 0 但没有帮助 我应该使用什么正确的 CSS 属性 table tr td th border
  • 如何获取 HtmlGenericControl 的属性值?

    我创造HtmlGenericControl像这样 HtmlGenericControl inner li new HtmlGenericControl li inner li Attributes Add style list style
  • 控制 HTML 中的图像加载顺序

    有没有办法控制网页上图像的加载顺序 我正在考虑尝试通过首先加载轻量级 加载 图形来模拟预加载器 有任何想法吗 Thanks 使用 Javascript 并填充图像src属性稍后 这 告诉浏览器链接到页面上的 URL 因此不会向服务器发送请求
  • 如何使用 selenium webdriver 单击 div 按钮?

    我有这个按钮 div class dsk col 1 4 card new div class div center div span class icon icon plus black symbol span h2 Create h2
  • div 元素中的文本在 Firefox 中位于水平对齐的 span 元素之上

    我正在编写一个 Web 应用程序 其中支持票证显示为左侧的票证 ID 作为静态文本 其余字段 描述 严重性 持续时间 状态 报告者 在右侧显示为固定文本中的滚动文本 大小视口 我从一个 span 包含票证 ID 和视口 div 包含第二个
  • 如何对结构切片而不是切片结构进行范围调整

    稍微玩了一下 Go HTML 模板后 我发现的所有循环模板中对象的示例都是将切片结构传递给模板 有点像这个示例 type UserList struct Id int Name string var templates template M
  • 辅助功能:在密码输入中显示/隐藏密码按钮

    密码输入具有显示 隐藏按钮是很常见的 但我在网上发现很少有关于与其相关的可访问性问题的内容 我是否应该将任何类型的 ARIA 属性附加到按钮或密码输入 是一个复选框还是一个触发JS的按钮也能达到很好的效果 不知道我应该注意什么 作为一个不太
  • AngularJs:当放置在 ng-view 标签内时,ng-include 不起作用

    我正在通过 ng view 内的角度路线加载 html 页面 我正在加载的页面包含一个 ng include 标签 指向 另一个 html 文件 我尝试了以下所有语法 div src div div div div src include

随机推荐