表单提交上的angularJS更新表模型

时间:2015-06-08 03:40:48

标签: angularjs laravel angularjs-scope

我是角色的新手,目前在表格提交上更新表数据时遇到问题。这是我的观点:

<div class="container-fluid">

    <div class="row">
        <div class="col-md-12" ng-controller="feeStatement">

        <panel panel-class="panel-sky" heading="Add Fee Details">
                <panel-controls>
                    <panel-control-collapse></panel-control-collapse> 
                </panel-controls>

                <div id="alert" class="alert alert-danger hide">
                  <strong>Error</strong> Unable to save the course data.<br><br>
                  <ul>
                      <li id="error"></li>
                  </ul>
                </div>

                <form ng-submit="submit(credentials)" ng-controller="feeStatement" class="form-horizontal row-border">

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label">Item Description</label>
                        <div class="col-md-6">
                            <textarea name="description" id="fieldabout" class="form-control autosize" rows="2" ng-model="credentials.description"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label">Due Date</label>
                        <div class="col-md-6">
                            <datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="datepicker"></datepicker>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label">Amount Payable</label>
                        <div class="col-md-6">
                            <input name="amount_payable"
                            type="number"
                            placeholder="Numbers only"
                            required
                            ng-model="credentials.amount_payable"
                            class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label">Total Collected</label>
                        <div class="col-md-6">
                            <input name="total_collected"
                            type="number"
                            placeholder="Numbers only"
                            required
                            ng-model="credentials.total_collected"
                            class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="fieldname" class="col-md-3 control-label"></label>
                        <div class="col-md-6">
                           <input type="submit" class="finish btn-success btn" value="Submit" />
                        </div>
                    </div>

                </form>

            </panel>

            <panel panel-class="panel-sky" heading="Fee Details">
                <panel-controls>
                    <panel-control-collapse></panel-control-collapse> 
                </panel-controls>

                <p ng-hide="isValid(feedetails)" class="ng-hide">No fee statements for the student.</p>
                <div ng-show="isValid(feedetails)" class="table-responsive">

                    <table class="table">
                        <thead>
                            <tr>
                                <th style="padding-right:100px">Item Description</th>
                                <th>Due Date</th>
                                <th>Amount Payable</th>
                                <th>Total Collected</th>
                                <th>Outstanding</th>
                                <th>Fine</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in feedetails">

                                <td align="left"><i>{{item.description}}</i></td>
                                <td align="left"><i>{{item.duedate}}</i></td>
                                <td align="left"><i>{{item.amount_payable}}</i></td>
                                <td align="left"><i>{{item.total_collected}}</i></td>
                                <td align="left"><i>{{item.outstanding}}</i></td>
                                <td align="left"><i>{{item.fine}}</i></td>

                            </tr>
                        </tbody>
                        <form ng-controller="feeStatement"><input type="submit" class="finish btn-success btn" ng-click="test()" value="Submit" /></form>
                    </table>
                </div>
            </panel>



        </div>
    </div>

</div> <!-- container-fluid -->

这是我的控制器功能:

 $scope.submit = function(credentials) {

        var outstanding = ($scope.credentials.amount_payable - $scope.credentials.total_collected);
        var base_url = $("meta[name='base_url']").attr('content');
        $scope.student_id = ($routeParams.student_id || "");

        var data = {
          'user_id': $scope.student_id,
          'description': $scope.credentials.description,
          'duedate': $scope.dt,
          'amount_payable': $scope.credentials.amount_payable,
          'total_collected': $scope.credentials.total_collected,
          'outstanding': outstanding
        };

        $http({
        method: 'post',
        url: base_url + '/student/postfees',
        data: data
        }).
        success(function(data, status, headers, config) {

          if(data['success']) {

            $scope.feedetails.push(data);

          } else {


          } 
        }).
        error(function(data, status, headers, config) {

            $('#error').html('code: ' + status);
            $('#alert').fadeIn(1000).removeClass('hide');
        });

    };

当我提交表单$scope.feedetails更新时,但行中的表数据仍然相同。但是,如果我点击带有test()功能的按钮,该功能位于表格标签内,则数据会动态更新。我已经通过了simillar主题,但这没有帮助。我认为$scope的问题,请有人给我指点。

PS。我试图将数据放在rootScope中,但结果仍然相同。

1 个答案:

答案 0 :(得分:0)

原因:

实际上问题是$scope中不存在success而您无法尝试从函数中注入,因为在代码中发生了这样的事情:

 promise.success = function(fn) {
    assertArgFn(fn, 'fn');

    promise.then(function(response) {
      fn(response.data, response.status, response.headers, config);
    });
    return promise;
  };

特别注意fn(response.data, response.status, response.headers, config);这意味着只会将那些参数传递给您的函数,并且根本没有$scope$rootScope

如何解决问题:

您可以做的一件事是生成一个可以访问$scope并将其注入.success的函数。
一种可能的实现方式是:

$scope.submit = function(credentials) {

    var outstanding = ($scope.credentials.amount_payable - $scope.credentials.total_collected);
    var base_url = $("meta[name='base_url']").attr('content');
    $scope.student_id = ($routeParams.student_id || "");

    var data = {
        'user_id': $scope.student_id,
        'description': $scope.credentials.description,
        'duedate': $scope.dt,
        'amount_payable': $scope.credentials.amount_payable,
        'total_collected': $scope.credentials.total_collected,
        'outstanding': outstanding
    };

    var callback = function(data) {
        $scope.feedetails.push(data);
    };

    $http({
        method: 'post',
        url: base_url + '/student/postfees',
        data: data
    })
    .success(function(data, status, headers, config) {
        if(data['success']) {
            callback(data);
        } else {

        } 
    })
    .error(function(data, status, headers, config) {
        $('#error').html('code: ' + status);
        $('#alert').fadeIn(1000).removeClass('hide');
    });
};