Question

这里我有2个阵列。第一个数组是选项内容，而第二个数组是选项标记（即A，B，C，D）。在使用ng-repeat时，如何进行'input type =“radio”'的布局？

在这里，我首先尝试“在选项标签中”，以便我可以将“A”，“B”，“C”，“D”作为标记。然后，我想在“A”和那个单选按钮之后输出“OptionA”。

在下面的代码中，它有效。但问题是，单选按钮在选项标签后出现四次。选项内容（OptionA，OptionB，OptionC，OptionD）现在正在显示。如何使单选按钮只出现一次，并在单选按钮后显示选项内容？感谢。

另一个问题。有时，选项数组中可能只有2个选项。如何仅显示选项标签A和B？

Angular JS代码：

$scope.option=["OptionA","OptionB","OptionC","OptionD"]
$scope.optionTag=["A", "B", "C", "D"]

HTML code：

<ul ng-repeat="w in optionTag">
  <li>{{w}}
    <input type="radio" data-ng-value="o"  ng-repeat="o in option" ng-model="my.Choice"/>{{o}}
  </li>
</ul>

Answer 1

两个阵列之间需要有相关性。假设它们都以相同的方式排序，您可以跟踪第一个$index上的ng-repeat，并在渲染单选按钮时引用当前索引。

<ul ng-repeat="w in optionTag track by $index">
    <li>{{w}}
        <input type="radio" ng-value="option[$index]" ng-model="my.Choice" />{{option[$index]}}
    </li>
</ul>

他们必须是两个独立的阵列吗？我会将结构更适合作为对象数组：

<强>结构

$scope.options = [
    {
        'option': 'OptionA',
        'optionTag': 'A'
    },
    {
        'option': 'OptionB',
        'optionTag': 'B'
    },
    {
        'option': 'OptionC',
        'optionTag': 'C'
    },
    {
        'option': 'OptionD',
        'optionTag': 'D'
    }
]

<强> HTML

<ul ng-repeat="optionObject in options track by $index">
    <li>{{optionObject.optionTag}}
        <input type="radio" ng-value="optionObject.option" ng-model="my.Choice" />{{optionObject.option}}
    </li>
</ul>

Answer 2

您需要使用一组对象。更好的代码，更容易扩展。例如，检查链接。

<ul ng-repeat="w in option">
 <li>{{w.Option}}
  <form >
      <div ng-repeat=" o in option">
<input type="radio" name="select" data-ng-value="{w.OptionTg}"/> {{o.OptionTag}}
      </div>
  </form >
 </li>

</ul>
</div>

pointer-events: none;

jsfiddle code

对两个数组使用ng-repeat

2 个答案: