Angularjs ng-repeat显示n项n次

时间:2013-08-21 21:20:14

标签: angularjs angularjs-directive angularjs-ng-repeat

我正在尝试在页面上的几个元素中使用ng-repeat。 由于某种原因,它会显示n个元素中的每一个n次,我无法弄清楚原因。 我的数组看起来像这样:

$scope.fieldNames = ["Last_Name","First_Name","Email","Home_Phone","Cell_Phone"];

我有一个填充n ^ 2次的选择框(我已尝试使用ng-options但无法使其与数组一起使用):

<td>
<select ng-model="currentField" style="width: 100%">
                        <option ng-repeat="field in fieldNames">{{field}}</option>
                    </select>
<td>

此外,我的表格的标题行也会发生这种情况。 但不包括成员行或包含在其中的单元格。

<table class = "main-table">
    <thead>
        <tr>
            <th ng-repeat = "field in fieldNames">{{field}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat = "member in members" >
            <td ng-repeat = "field in fieldNames">{{member[field]}}</td>
        </tr>
    </tbody>
</table>

如果有人能够向我解释为什么会发生这种情况以及如何解决这个问题我将不胜感激。还将赞赏ng-options的工作示例。

提前感谢您的时间。

2 个答案:

答案 0 :(得分:2)

要使用ng-options中的字符串列表,您需要理解表达式,如下所示

<select ng-model="currentField" ng-options="field for field in fieldNames"></select>

DEMO

答案 1 :(得分:1)

事实证明,每个项目重复n次的原因是我的页面和我使用的两个布局模板都有

<script type = "text/javascript" src =  https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>

结果,角度明显加载两次,并在ng-repeat上运行ng-repeat,因此所有附加条目。