Question

我设计了动态表，其中包含各种类型的输入字段。我们可以根据需要添加和删除行。这是我的HTML视图代码：

<body>
      <div ng-app="appTable">
         <div ng-controller="Allocation">
            <button ng-click="add()"> Add </button> 
            <button ng-click="remove()">remove</button>
            <table>
               <th>
               <td>Date</td>
               <td>Project</td>
               <td>Release</td>
               <td>Feature</td>
               <td>Module name</td>
               <td>Hours spent</td>
               <td>Comment</td>
               </th>
               <tr ng-repeat="data in dataList">
                  <td><input type="checkbox" ng-model="data.isDelete"/></td>
                  <td>
                  <input type="text"
                           datepicker
                           ng-model="data.date" />                 
                  </td>
                  <td><input type="text" ng-model="data.dept"/></td>
                  <td>
                     <select ng-model="data.release" ng-options="x for x in range">
                     </select>
                  </td>
                  <td>
                     <select ng-model="data.feature" ng-options="x for x in feature">
                     </select>
                  </td>
                  <td>
                     <input type = "text" ng-model = "data.modulename">
                  </td>
                  <td>
                     <select ng-model="data.hours" ng-options="x for x in hours">
                     </select>
                  </td>
                  <td>
                     <input type = "text" ng-model = "data.comment">
                  </td>

               </tr>
            </table>
            <button ng-click="Submit()">Submit</button>
            <tr ng-repeat="data in dataList">
               <p>{{data.date}}</p>
               <p>{{test}}</p>
            </tr>
         </div>
      </div>
   </body>

这是我的angularJS脚本：

<script>
      var app = angular.module("appTable", []);

       app.controller("Allocation", function($scope) {
        $scope.hours = ["1", "2", "3"];
        $scope.range = ["1", "2", "3"];
        $scope.feature = ["UT", "FSDS", "Coding/Devlopment", "QA"];

        $scope.dataList = [{
         date: '17/07/2016',
         dept: 'OneCell',
         release: '1',
         feature: "UT",
         modulename: "Redundancy",
         hours: "1",
         comment: "Add extra information"
        }];

        $scope.add = function() {
         var data = {};
         var size = $scope.dataList.length - 1;
         data.date = $scope.dataList[size].date;
         data.dept = $scope.dataList[size].dept;
         data.release = $scope.dataList[size].release;
         data.feature = $scope.dataList[size].feature;
         data.modulename = $scope.dataList[size].modulename;
         data.hours = $scope.dataList[size].hours;
         data.comment = $scope.dataList[size].comment;
         $scope.dataList.push(data);


        };

        $scope.Submit = function() {
         $scope.test = "Submit is pressed...";

        };
        $scope.remove = function() {
         var newDataList = [];
         angular.forEach($scope.dataList, function(v) {
          if (!v.isDelete) {
           newDataList.push(v);
          }
         });
         $scope.dataList = newDataList;
        };

       });

       app.directive("datepicker", function () {

         function link(scope, element, attrs, controller) {
            // CALL THE "datepicker()" METHOD USING THE "element" OBJECT.
            element.datepicker({
                onSelect: function (dt) {
                    scope.$apply(function () {
                        // UPDATE THE VIEW VALUE WITH THE SELECTED DATE.
                        controller.$setViewValue(dt);   

                    });
                },
                dateFormat: "dd/mm/yy"      // SET THE FORMAT.
            });
         }

         return {
            require: 'ngModel',
            link: link
         };
         });
   </script>

我已经使用dataList数组（列表）来存储表的行。每次添加或删除行时，都会添加和删除dataList数组中的各个元素。我已经提交了＃34;提交＆＃34;我的视图中的按钮。当按下此按钮时，将打印所有dataList元素，如此处所示，

<button ng-click="Submit()">Submit</button>
            <tr ng-repeat="data in dataList">
               <p>{{data.date}}</p>
               <p>{{test}}</p>
            </tr>

但有些如何不打印dataList元素。但是我能够打印测试字符串的值。请帮助。

Answer 1

您在<tr>使用普通ng-repeat元素，这不起作用，因为它需要适当的表格结构。

E.g：

<table>
        <tr ng-repeat="data in dataList">
            <td>
                 <p>{{data.date}}</p>
            </td>
        </tr>
</table>

P.S。：您的提交按钮无效。只打印一个声明。上面的代码ng-repeat将适用于每个添加和删除语句。即它会同时打印数据。

无法在角度JS中使用ng-repeat在视图中打印数组

1 个答案: