对 2 个数组使用 ng-repeat答案

【问题标题】：Use ng-repeat for 2 arrays对 2 个数组使用 ng-repeat
【发布时间】：2015-08-27 03:12:37
【问题描述】：

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

在这里，我首先尝试执行“w in optionTag”，以便可以将“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 代码：

<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>

【问题讨论】：

你能举例说明它在渲染时的外观吗？
你是说它什么时候运行？只是，每个标签后面都有四个单选按钮。并且没有出现任何选项内容。我试图做的是使输出像：选项标签，单选按钮，选项内容。

标签： javascript html arrays angularjs

【解决方案1】：

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

<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>

【讨论】：

【解决方案2】：

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

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

$scope.option=[{Option: "A", OptionTag: "OptionA"}, {Option: "B", OptionTag: "OptionB"}, {Option: "C", OptionTag: "OptionC"}, {Option: "D", OptionTag: "OptionD"}]; 

}

<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>

jsfiddle code

【讨论】：