Question

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

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>

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

我需要改变什么？

由于

黑麦

Answer 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结束标记。

Angular ng-repeat显示太多按钮

1 个答案: