Question

enter image description here 我想添加我在表格中输入的信息;

这是我的表格

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

这是我的java控制器

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

    }

这是我的Js控制器

 //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(){
         });


    }

有任何帮助吗？当我点击导入报告时，我没有错误，但信息没有添加到表中

Answer 1

“数据”映射之间可能存在不匹配。和＆＃39; $ scope.reports＆＃39;变量

您能否发布两个值的日志。

Answer 2

您可以参考此答案

AngularJS: ng-repeat list is not updated when a model element is spliced from the model array

使用scope.$apply();

Answer 3

我认为问题，如果我理解控制台输出正确，是一个元素的数组被添加到$ 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(){
    });
}

AngularJS：无法在表中添加行

3 个答案: