单个 ng-repeat 内的多个无线电组不起作用

Question

我搞不懂这个，不知道为什么它不起作用。我有一种情况，我需要有父复选框，当这些复选框被 selected 时，子单选按钮会下拉到他们需要 select 每个复选框有一个项目的地方 selected。这部分工作正常，问题是当多个复选框被 selected 时，单选按钮的行为就像它们都在同一个名称下，即使它们不是......当一个是 select ed，当我只希望该名称下的其他人成为 deselected 时，所有其他人都成为 deselected。该模板是为在 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>

所以基本上无线电组名称与父名称相同，因此 IP 中的子项名称为 IP，IR 下的子项名称为 IR，IS 下的子项名称为 IS.. .但他们仍然表现得像他们是同一个名字的一部分——这对我来说没有意义，因为单选按钮应该按他们的名字分组……任何帮助将不胜感激！

PS：请不要告诉我有关使用内联样式的信息---我知道这不是最佳做法，但是我别无选择，因为我工作的公司是全球性的css 工作表是唯一被查看的工作表，因此对此的任何修改都需要在线完成。

Answer 1

https://plnkr.co/edit/Id1HxsRvYECQYOe3oMKD?p=preview

任何人都很难理解这个标记。它比它需要的要复杂得多，而且很难阅读。在控制器中尽可能地进行所有结构化处理，使视图变干，使其易于阅读。

将 children 映射到原始 parents 数组或创建一个新数组：

  parents = parents.map(function(p) {
    p.children = children.filter(function(c) {
      return c.parent == p.name;
    });
    return p;
  });

现在您的新 parents 数组如下所示：

  /*
  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'}
      ]
    }
  ]; */

每个复选框都有自己的 children 以便轻松映射到标记中。我已将其大大简化为 bare-bones 我们需要的功能：

<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 就会将这些添加到 parent object。

这已经可以工作了 as-is 我们甚至还没有为收音机命名。请注意，收音机的 ng-model 属于 PARENT。 child 我们真正需要的是每个无线电应该代表的值。

单个 ng-repeat 内的多个无线电组不起作用

multiple radio groups inside single ng-repeat not working

javascript

radio-group

angularjs

angularjs-ng-repeat

angular-formly