Angular ng-repeat 显示太多按钮答案

【问题标题】：Angular ng-repeat displays too many buttonsAngular ng-repeat 显示太多按钮
【发布时间】：2015-05-09 01:05:22
【问题描述】：

这是我的控制器和嵌套数组/对象。

var MainController = function ($scope) {
    var test_model = nested //setup_model_groups(portfolio_repository);
    $scope.positions = test_model;

var nested = [{orchards: [{orchard_name: "North", tree_type:[{tree_type_name: "Apple",varieties: [{ name: "Fuji", number: 50 },{ name: "Granny", number: 100 }]}, {tree_type_name: "Cherry", varieties: [{ name: "Black", number: 10 },{ name: "Red", number: 75 }]}]}]}, {orchards: [{orchard_name: "South", tree_type: [{tree_type_name: "Orange", varieties:[{name: "Navel", number:35}, { name: "Tangerine", number: 60 }]}]}]}]

这是我的html：

<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MY First Test</title>
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
    <script src="JavaScript1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js">
    </script>
</head>
<body ng-controller="MainController">
    <div ng-repeat="a in positions">
        <div ng-repeat="b in a">
            <div ng-repeat="c in b">
                {{c.orchard_name}}
                <div ng-repeat="d in c">
                    <div ng-repeat="e in d">                        
                        {{e.tree_type_name}}
                        <form> <input type="submit" /></form>
                        <table ng-repeat="f in e.varieties">
                            <thead>
                              <tr>
                                  <th>
                                      <button>Add A New Tree Type</button>
                                  </th>
                              </tr>
                            <tbody>
                                <tr>
                                    <td>
                                        {{f.name }}
                                        <input ng-model="f.number" />
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

这里的问题是“添加新树类型”按钮。当我只希望它在树名右侧的每个树类型中出现一次时，它会出现在每个品种中。

我需要改变什么？

谢谢

黑麦

【问题讨论】：

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

您需要从最后一个中继器中移出表头。

                <div ng-repeat="e in d">                        
                    {{e.tree_type_name}}
                    <form> <input type="submit" /></form>
                    <table>
                        <thead>
                          <tr>
                              <th>
                                  <button>Add A New Tree Type</button>
                              </th>
                          </tr>
                        <tbody>

                            <tr ng-repeat="f in e.varieties">
                                <td>
                                    {{f.name }}
                                    <input ng-model="f.number" />
                                </td>
                            </tr>

                        </tbody>
                    </table>
                </div>

另外，如果您需要提交此表中的数据，则需要移动您的 form 结束标记。

【讨论】：

@CmaStena 谢谢，但是现在我得到了多个“表格”，其中包含一个输入元素“添加新树”。
我在原始 HTML 标记中看不到“添加新树”按钮。您可以使用示例创建 jsfiddle 并分享它吗？