Javascript Can'；t在视图中使用ng repeat以角度JS打印阵列_Javascript_Angularjs_Angularjs Ng Repeat

Javascript Can'；t在视图中使用ng repeat以角度JS打印阵列

javascript angularjs

Javascript Can'；t在视图中使用ng repeat以角度JS打印阵列,javascript,angularjs,angularjs-ng-repeat,Javascript,Angularjs,Angularjs Ng Repeat,我设计了具有各种类型输入字段的动态表。我们可以根据需要添加和删除行。以下是我的HTML视图代码： <body> <div ng-app="appTable"> <div ng-controller="Allocation"> <button ng-click="add()"> Add </button> <button ng-click="remov

我设计了具有各种类型输入字段的动态表。我们可以根据需要添加和删除行。以下是我的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>


添加
去除
日期
项目
释放
特征
模块名
花费的时间
评论
提交
{{data.date}
{{test}}

这里是我的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>


var app=angular.module（“appTable”，[]）；
应用控制器（“分配”，功能（$scope）{
$scope.hours=[“1”、“2”、“3”]；
$scope.range=[“1”、“2”、“3”]；
$scope.feature=[“UT”、“FSD”、“编码/开发”、“QA”]；
$scope.dataList=[{
日期：2016年7月17日，
部门：'OneCell'，
发布：'1'，
特色：“UT”，
modulename：“冗余”，
小时数：“1”，
评论：“添加额外信息”
}];
$scope.add=函数（）{
变量数据={}；
变量大小=$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（数据）；
};
$scope.Submit=函数（）{
$scope.test=“按提交…”；
};
$scope.remove=函数（）{
var newDataList=[]；
angular.forEach（$scope.dataList，函数（v）{
如果（！v.isDelete）{
newDataList.push（v）；
}
});
$scope.dataList=newDataList；
};
});
应用程序指令（“日期选择器”，函数（）{
功能链接（范围、元素、属性、控制器）{
//使用“element”对象调用“datepicker（）”方法。
元素日期选择器({
onSelect：函数（dt）{
作用域：$apply（函数（）{
//使用所选日期更新视图值。
控制器$setViewValue（dt）；
});
},
dateFormat:“dd/mm/yy”//设置格式。
});
}
返回{
要求：'ngModel'，
链接：链接
};
});

我使用dataList数组（list）来存储表中的行。每次添加或删除行时，dataList数组中的各个元素都会被添加和删除。我已经将“提交”按钮放在我的视图中。当按下此按钮时，所有数据列表元素都将打印出来，如图所示

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

提交
{{data.date}
{{test}}

但是有些数据列表元素是如何不打印的。但是我可以打印测试字符串的值。请帮助。

这里您使用的是普通的

元素，用于

ng repeat

，这将不起作用，因为它需要正确的表结构

例如：


{{data.date}

注意：您的提交按钮没有任何作用。只是打印一份声明。上述代码的

ng repeat

将适用于每个add和delete语句。i、 e.它将同时打印数据。

在您的示例中，

dataList

没有

名称

属性。你的意思是

modulename

？我已将属性从名称更改为日期。这是我的错误…但它仍然不起作用。我有两个问题：1.它是如何同时打印的？2.我想要功能，例如当按下提交按钮时，只应打印数组元素。我对aj非常陌生，请如果我问了一些愚蠢的问题，请原谅。这就是ng repeat的工作原理，它监视dataList元素，每当在该对象中添加或删除元素时，它都会更新视图中的元素。对于submit按钮的功能，您可以通过多种方式实现，例如提交时隐藏和显示，或者在提交时分配单独的变量，并且只在ng repeat中使用该变量。

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