Javascript AngularJS:无法在表中添加行

我想在表格中添加我在表格中键入的信息

这是我的表格

 <section id="contact-info">


    <section id="contact-page">
        <div class="container">
            <div class="center">        

                <p class="lead">Import reports</p>
            </div> 
            <div class="row contact-wrap"> 
                <div class="status alert alert-success" style="display: none"></div>
                <form id="main-contact-form" class="contact-form" name="contact-form" method="POST" enctype="multipart/form-data" >
                    <div class="col-sm-5 col-sm-offset-1">
                        <div class="form-group">
                            <label>name *</label>
                            <input type="text" name="NameOfUploader" class="form-control" required="required" ng-model="r.NameOfUploader">
                        </div>
                       <div class="form-group">  
                            <label>DateOfUploade</label>
                            <input type="Date" class="form-control" ng-model="r.DateOfUpload" >
                        </div>
                            <div class="form-group">
                                <label for="t">Type of File</label>
                                <select 
                                    class="form-control" id="t" ng-model="r.TypeOfFile">
                                    <option>.word</option>
                                    <option>.xsl</option>
                                    <option>.pdf</option>
                                </select>
                            </div> 

                            <div class="form-group">
                            <label>file</label>
                            <input type="file" name="file" class="form-control" fileread="r.file">
                        </div>                        

                        <div class="form-group">
                            <button type="submit"  class="btn btn-primary btn-lg"  ng-click="saveDetails()">Import File</button>
                        </div>
                                    <table class="table">
                            <tr>
                                <th>Id_file</th>
                                <th>NameOfUploader</th>
                                <th>DateOfUpload</th>
                                <th>TypeOfFile</th>
                                <th>File</th>
                            </tr>
                            <tr ng-repeat="r in reports">
                                <td></td>
                                <td>{{r.NameOfUploader}}</td>
                                <td>{{r.DateOfUpload}}</td>
                                <td>{{r.TypeOfFile}}</td>
                                <td>{{r.file}}</td>
                            </tr>
                        </table>   

                    </div> 


                    </form> 
            </div><!--/.row-->
        </div><!--/.container-->
    </section><!--/#contact-page-->

这是我的Js控制器

@RequestMapping(value="/saveDetails")
    public DetailsReport saveDetails(DetailsReport d)
    {
        detailsReportRepository.save(d);
        System.out.println(d.toString());
        return  d;

    }

 //Save details of report

    $scope.saveDetails=function(){

          var fd = new FormData();
          var url='http://localhost:8080/saveDetails';
          fd.append("NameOfUploader",$scope.r.NameOfUploader);
          fd.append("DateOfUpload",$scope.r.DateOfUpload);
          fd.append("TypeOfFile",$scope.r.TypeOfFile);
          fd.append("file", $scope.r.file);

         console.log(fd);
         $http.get(url,fd,{
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}
         })
         .success(function(data){

             $scope.reports.push(data);
            console.log(data);
             console.log($scope.reports);

         })
         .error(function(){
         });


    }

---

有什么帮助吗？当我单击导入报告时，我没有错误，但是信息没有添加到表中

在“data”和“$scope.reports”变量之间的映射可能不匹配

---

您可以发布这两个值的日志吗。

您可以参考此答案

---

通过使用

scope.$apply（）
如果我正确理解控制台输出，我认为问题在于将一个元素的数组添加到$scope.reports而不是对象，因此打印一个空行，因为没有与r元素匹配的数据

在控制器中，如果是数组，则应添加单个元素

//Save details of report
$scope.saveDetails=function(){

    var fd = new FormData();
    var url='http://localhost:8080/saveDetails';
    fd.append("NameOfUploader",$scope.r.NameOfUploader);
    fd.append("DateOfUpload",$scope.r.DateOfUpload);
    fd.append("TypeOfFile",$scope.r.TypeOfFile);
    fd.append("file", $scope.r.file);

    onsole.log(fd);
    http.get(url,fd,{
        transformRequest: angular.identity,
        headers: {'Content-Type': undefined}
    })
    .success(function(data){
        if (data instanceof Array){
            for (i = 0; i< data.length; i++){
                $scope.reports.push(data[i]);
            }
        } else {
            $scope.reports.push(data);
        }
        console.log(data);
        console.log($scope.reports);
    })
    .error(function(){
    });
}

//保存报表的详细信息
$scope.saveDetails=function（）{
var fd=新FormData（）；
var url='1〕http://localhost:8080/saveDetails';
追加（“NameOfUploader”，$scope.r.NameOfUploader）；
fd.append（“DateOfUpload”，$scope.r.DateOfUpload）；
fd.append（“typeofile”，$scope.r.typeofile）；
fd.append（“文件”，$scope.r.file）；
onsole.log（fd）；
http.get（url，fd{
请求：angular.identity，
标题：{'Content-Type'：未定义}
})
.成功（功能（数据）{
if（数组的数据实例）{
对于（i=0；i
当您执行$http.get时，它会进入成功或错误回调吗？成功但它没有添加任何内容，我已尝试放置console.log（$scope.r.nameofploader）；只是想看看它是否显示了输入的值，并且在success函数中是否正常工作，数据是否正常，以及$scope.reports是否也正常工作？或者在回调中出现一些奇怪的情况？不，根本没有错误，但在执行console.log（$scope.reports）时，它在$scope.reports中添加了新记录？还有，你能填一个plunker或类似的来试试吗？我也是，我想这可能是问题所在，因为我发布了这两个值的日志图像，仍然是它在控制台中显示的问题：Object{id_file:85，file:null，dateOfUpload:null，nameOfUploader:null，typeOfFile:null}，这意味着数据没有正确地发送到服务器，不是吗？是的，您正在从服务器发送空值，因此添加的行中没有显示任何数据，但我没有发送空值。我不知道问题出在哪里。您能帮忙吗？但这是您的服务器的问题。您返回的对象在文件、DateOfPload、NameOfPloader和typeOfFile中的值为空。在服务器端检查它您是说在java Controller中，我应该测试saveDetails的返回吗？