Javascript Angular ng repeat显示的按钮太多_Javascript_Angularjs_Angularjs Ng Repeat

Javascript Angular ng repeat显示的按钮太多

javascript angularjs

Javascript Angular ng repeat显示的按钮太多,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,这是我的控制器和一个嵌套数组/对象 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: "Appl

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

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>


我的第一次测试
{{c.orchard_name}
{{e.tree_type_name}
添加新的树类型
{{f.name}

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

我需要改变什么

谢谢

Rye

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

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


{{e.tree_type_name}
添加新的树类型
{{f.name}

此外，如果您需要提交此表中的数据，则需要移动

表单

结束标记。

@CmaStena谢谢，但是现在我得到了多个带有单个输入元素“添加新树”的“表”。我在原始HTML标记中没有看到“添加新树”按钮。您能用这个示例创建JSFIDLE并共享它吗？