- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法弄清楚这个问题,不知道为什么它不起作用。我遇到一种情况,我需要有父复选框,当选择这些复选框时,子单选按钮会下拉,他们需要为他们选择的每个复选框选择一个项目。这部分工作正常,问题是当选择了多个复选框时,单选按钮的行为就像它们都在同一个名称下,即使它们不是......当选择一个时,当我只选择一个时,所有其他按钮都会被取消选择希望取消选择该名称下的其他项目。该模板是为在 formly 中使用而编写的,这就是为什么你看到 ng-model 可能看起来很奇怪,它基本上采用了用于 formly 的模型(一个优秀的 angularjs 动态 js 表单库)
以下是被输入 ng-repeats 的数组:
to.parents = [{name: 'IR', value: 'IR'}, {name: 'IS', value: 'IS'}, {name: 'IP', value: 'IP'}];
to.children = [{name: 'New', value: 'IRNew', parent: 'IR'}, {name: 'Maintenance', value: 'IRMain', parent: 'IR'}, {name: 'Existing', value: 'IRExist', parent: 'IR'}, {name: 'New', value: 'ISNew', parent: 'IS'}, {name: 'Maintenance', value: 'ISMain', parent: 'IS'}, {name: 'Existing', value: 'ISExist', parent: 'IS'}, {name: 'New', value: 'IPNew', parent: 'IP'}, {name: 'Maintenance', value: 'IPMain', parent: 'IP'}, {name: 'Existing', value: 'IPExist', parent: 'IP'}]
下面是模板:
<div class="radio-group row" ng-class="{\'has-error\': options.formControl.$invalid}">
<label class="control-label">{{to.label}}{{to.required ? \'*\' : \'\'}}</label>
</div>
<div class="row" style="margin-left:10px;">
<div class="{{to.col}}" ng-repeat="parent in to.parents track by $index" style="margin-top: 5px; margin-left:0px;"
ng-class="{\'checkbox\': !to.inline, \'checkbox-inline\':to.inline}">
<input type="checkbox" id="{{parent.value}}{{$index}}"
class="checkbox-inline styled styled-primary multiCheck{{$index}}"
aria-describedby="{{id}}_description" ng-value="parent.name"
ng-model="$parent.model[$parent.options.key || $parent.$index][parent.value]"
ng-disabled="{{parent.disabled}}">
<label for="{{parent.value}}{{$index}}" style="font-weight: normal;">{{parent.name}}</label>
<p id="{{id}}_description" class="help-block" ng-if="parent.desc">{{parent.desc}}</p>
<div class="radio" style="margin-left:20px; margin-top: 10px;"
ng-repeat="child in to.children track by $index"
ng-class="{\'radio\': !to.radInline, \'radioinline\':to.radInline}"
ng-if="child.parent === parent.name && $parent.model[$parent.options.key|| $parent.$index][parent.value]">
<div class="radio-group {{to.colChild}} pull-left"
style="margin-top: 5px; margin-bottom: 10px;">
<input type="radio" name="{{child.parent}}" id="{{child.value}}{{parent.value}}{{$index}}"
class="radio radio{{$index}}" ng-value="child.value" ng-model="model[parents.key]">
<label for="{{child.value}}{{parent.value}}{{$index}}">{{child.name}}</label>
</div>
</div>
</div>
</div>
所以基本上 radio 组名称与父名称相同,因此 IP 中的子级名称为 IP,IR 下的子级名称为 IR,IS 下的子级名称为 IS...但是它们仍然表现得好像它们是同一个名称的一部分——这对我来说没有意义,因为单选按钮应该按它们的名称分组...任何帮助将不胜感激!
PS:请不要告诉我有关使用内联样式的信息——我知道这不是最佳实践,但我别无选择,因为我工作的公司有全局 css 表,这是唯一可以查看的表at,因此对此的任何修改都需要内联完成。
最佳答案
https://plnkr.co/edit/Id1HxsRvYECQYOe3oMKD?p=preview
任何人都很难理解这个标记。它比实际需要的要复杂得多,而且很难阅读。在 Controller 中尽一切可能进行结构化,以干燥 View ,使其非常易于阅读。
将子级映射到原始父级数组中或创建一个新数组:
parents = parents.map(function(p) {
p.children = children.filter(function(c) {
return c.parent == p.name;
});
return p;
});
现在你的新 parent 数组看起来像这样:
/*
parents = [
{
name: 'IR',
value: 'IR',
children: [
{name: 'New', value: 'IRNew', parent: 'IR'},
{name: 'Maintenance', value: 'IRMain', parent: 'IR'},
{name: 'Existing', value: 'IRExist', parent: 'IR'},
]
},
{
name: 'IS',
value: 'IS',
children: [
{name: 'New', value: 'ISNew', parent: 'IS'},
{name: 'Maintenance', value: 'ISMain', parent: 'IS'},
{name: 'Existing', value: 'ISExist', parent: 'IS'}
]
},
{
name: 'IP',
value: 'IP'
children: [
{name: 'New', value: 'IPNew', parent: 'IP'},
{name: 'Maintenance', value: 'IPMain', parent: 'IP'},
{name: 'Existing', value: 'IPExist', parent: 'IP'}
]
}
]; */
每个复选框都有自己的子项,可以轻松映射到标记中。我已经大大简化了它,只剩下我们功能所需的基本内容:
<form>
<div ng-repeat="p in parents track by $index">
<label for="">{{p.name}}</label>
<input type="checkbox" name="" id="" value="" ng-model="p.isChecked" />
<div ng-repeat="c in p.children track by $index" ng-show="p.isChecked">
<label for="">{{c.name}}</label>
<input type="radio" name="" id="" ng-value="c.value" ng-model="p.radioChoice"/>
</div>
</div>
</form>
注意模型值的 isChecked
和 radioChoice
。一旦定义了模型的值,Angular 就会将它们添加到父对象中。
这已经可以按原样工作,我们甚至还没有命名 radio 。请注意, radio 的 ng-model
属于父级。我们真正需要从 child 那里得到的是每个 radio 应该代表的值。
关于javascript - 单个 ng-repeat 内的多个 radio 组不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49348853/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!