Question

我在使用按钮在表格中添加行时遇到了一些问题。

这是我的HTML（请注意，我有两个具有相同自定义指令的元素，确定有效）：

<input class="form-control" id="dispatcherPod" ng-model="pod.pod">
<exa-datepicker model="pod.startDate" required="true"disabled="true" min-mode="day"id="podStartDate"
                                format="yyyy-MM-dd" readonlydata="false"></exa-datepicker>
<exa-datepicker model="pod.endDate" required="true" disabled="true"
                                min-mode="day" id="podEndDate" format="yyyy-MM-dd"
                                readonlydata="false"></exa-datepicker>
<button type="button" class="btn btn-primary pull-right"
                                ng-click="puntualAdd()">{{'PUNTUAL_ADD' | translate}}</button>

这是我的js：

$scope.puntualAdd = function (){
                    if($scope.pod.pod == undefined || $scope.pod.pod == null){
                        $scope.errorPod=true;
                        $scope.errorMessage.push("field_required_pod");
                    }
                    if($scope.pod.startDate == undefined || $scope.pod.startDate == null){
                        $scope.errorStartDate=true;
                        $scope.errorMessage.push("field_required_startDate");
                    }
                    if($scope.pod.endDate == undefined || $scope.pod.endDate == null){
                        $scope.errorEndDate=true;
                        $scope.errorMessage.push("field_required_endDate");
                    }
                    if($scope.errorMessage.length==0){
                        $scope.puntualSupply={};
                        $scope.puntualSupply.supply_code=$scope.pod.pod;
                        $scope.puntualSupply.start_date= $scope.pod.startDate.toString();
                        $scope.puntualSupply.end_date= $scope.pod.endDate.toString();
                        $scope.puntualSupply.state= "NULL";
                        $scope.insSupplies.push($scope.puntualSupply);
                    }

                }

这里有显示数据的表：

<table class="table" ng-controller="SpotDispatcherController">
                        <thead>
                            <tr>
                                <th class="col-order">{{'POD' | translate}}</th>
                                <th class="col-order">{{'CUSTOMER_DENOMINATION'| translate}}</th>
                                <th class="col-order">{{'VAT_NUMBER'| translate}}</th>
                                <th class="col-order">{{'START_DATE'| translate}}</th>
                                <th class="col-order">{{'END_DATE'| translate}}</th>
                                <th class="col-order">{{'STATE'| translate}}</th>
                                <th class="colf-cmd"></th>
                                <th class="col-order">{{'ERROR_DESCRIPTION'| translate}}</th>
                            </tr>
                        </thead>
                        <tbody> 
                            <tr ng-repeat="row in insSupplies">
                                <td>{{row.supply_code}}</td>
                                <td>WIP</td>
                                <td>WIP</td>
                                <td>{{row.start_date}}</td>
                                <td>{{row.end_date}}</td>
                                <td>{{row.state}}</td>
                                <td class="colf-cmd">
                                    <div class="form-group">
                                        <div class="form-btn-container text-center">
                                            <button type="button" class="btn btn-primary"
                                                ng-click="deleteRecord()">X</button>
                                        </div>
                                    </div>
                                </td>
                                <td>{{row.state}}</td>
                            </tr>
                        </tbody>
                    </table>

请注意，我之前的数据显示在表格中，我想添加其他数据，但是当我这样做时，我的$scope.insSupplies会将我在输入中写入的数据记录下来，但不会; t表示在表中

没有给出任何错误，即使在控制台中也没有错误，我试图在没有任何<a>标记的情况下实现错误

以下是我的代码plunkr。

编辑：你可以告诉我如何改进我的问题

，而不是贬低

Answer 1

您的问题是您有两次ng-controller。你只需要<body>一次。此外，我更改了您的代码，以便您传递要使用puntualAdd（）函数的值。这是更好的练习，整体更有意义。希望有所帮助！

HTML：

<body  ng-controller="SpotDispatcherController">
  <ng-form>
    <div class="form-inline">
      <div class="row">
        <div class="form-group">
          <label title="POD" for="dispatcherPod">POD</label>
          <input class="form-control" id="dispatcherPod" ng-model="pod.pod">
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-primary pull-right" ng-click="puntualAdd(pod.pod)">PUNTUAL_ADD</button>
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th class="col-order">POD</th>
              <th class="col-order">DENOMINATION</th>
              <th class="col-order">VAT_NUMBER</th>
              <th class="col-order">STATE</th>
              <th class="colf-cmd"></th>
              <th class="col-order">ERROR_DESCRIPTION</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in insSupplies">
              <td>{{row.supply_code}}</td>
              <td>WIP</td>
              <td>WIP</td>
              <td>{{row.state}}</td>
              <td class="colf-cmd">
                <div class="form-group">
                  <div class="form-btn-container text-center">
                    <button type="button" class="btn btn-primary" ng-click="deleteRecord()">X</button>
                  </div>
                </div>
              </td>
              <td>{{row.state}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </ng-form>
</body>

JavaScript的：

var app = angular.module('plunker', []);
  app.controller('SpotDispatcherController', ['$scope',

    function($scope) {
      $scope.insSupplies = [];
      $scope.pod = [];
      $scope.puntualAdd = function(input) {
        $scope.insSupplies.push({
          id: null,
          dispatch_id:null,
          supply_code: input,
          magnitude:null,
          stat: "NULL",
          state_desc: null,
          start_date_val: null,
          end_date_val: null,
          ext_date: null,
          aut_mod: null,
          date_mod: null
        });


      };
    }
  ]);

工作代码：Plunkr

Answer 2

如果您的代码工作正常，并且您的数组“$ scope.insSupplies”已成功更新，则所有内容都可以正常工作。

检查此答案可能会对您有所帮助：How to add dynamic row to a table using angularjs

如何使用按钮

2 个答案: