Question

我需要在单击第一个表的元素时刷新第二个表。第一个表加载但第二个表在我单击第一个表的元素时不加载其数据。

第一张表：

pausableInterval(paused: Rx.Observable<boolean>): Rx.Observable<number> {
    return Rx.Observable.create((obs: Rx.Observer<number>) => {
        let i = 0;
        let ticker = Rx.Observable.interval(1000 / this.fps).map(() => i++)

        let p = paused.switchMap(paused => paused ? Rx.Observable.never() : ticker);
        return p.subscribe(val => obs.next(val), err => obs.error(err), () => obs.complete());
     });
 }

第二桌主体：

<div id="master-table" ng-controller="purchaseInvoiceController">
<table dir="rtl" width="500" border="2" style="background:#ddd;
      summary="purpose/structure for speech output">

  <colgroup width="33%" />
  <colgroup id="colgroup" class="colgroup" align="center"
      valign="middle" title="title" width="33%"
      span="2" />
  <thead>
    <tr>
      <th scope="col">Invoice No.</th>
      <th scope="col">Amount</th>
      <th scope="col">Date</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><input type="text" name="addProduct" id="addProduct" ng-model="purchaseInvoice.purchaseInvoiceId"></td>
      <td><input type="text" name="addProduct" id="addProduct" ng-model="purchaseInvoice.amount"></td>
      <td><input type="text" name="addProduct" id="addProduct" ng-model="purchaseInvoice.dateInvoiced"></td>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr id="table-element" ng-repeat="purchaseInvoice in purchaseInvoices" ng-click="getLines(purchaseInvoice)">
      <td>{{purchaseInvoice.purchaseInvoiceId}}</td>
      <td>{{purchaseInvoice.amount}}</td>
      <td>{{purchaseInvoice.dateInvoiced}}</td>
    </tr>
  </tbody>
</table>

当我单击第一个表的元素并且数据加载到我用于测试的JavaScript消息中时，getLines（）函数会运行。但是，第二个表在单击主元素时不会加载其数据。 AngularJS模块如下：

<tbody>
        <tr id="table-element" ng-repeat="purchaseInvoiceLine in purchaseInvoiceLines">
          <td>{{purchaseInvoiceLine.purchaseInvoiceId}}</td>
          <td>{{purchaseInvoiceLine.purchaseInvoiceLineId}}</td>
</tbody>

Answer 1

您的代码看起来不错，我找不到任何问题。

我想让你看一下你的第二个表是否存在于下一个具有ng-controller的div中，

<div id="master-table" ng-controller="purchaseInvoiceController">

因为，我可以看到div id为＆＃34; master-table＆＃34;，我怀疑你的第二个表可能在控制器之外，在这种情况下，它不会被刷新。

如果是这种情况，那么将第二个表移到上面的div中并尝试一下。

如果不是这种情况，请发布整个html以进一步查看。

另外，如果您将第二个控制器声明为如下所示，则模块将重新初始化，您将丢失第一个控制器方法。

angular.module('pu', []).controller

如果你需要在同一页面内使用两个或更多控制器，那么先使用第二个参数声明模块，然后对所有控制器使用相同的控制器，而不使用第二个参数。

var app = angular.module('pu', []);
// without second parameter 
angular.module('pu').controller

Answer 2

 <div id="master-table" ng-controller="purchaseInvoiceController">
                <table dir="rtl" width="500" border="2" style="background:#ddd;
                      summary="purpose/structure for speech output">

                  <colgroup width="33%" />
                  <colgroup id="colgroup" class="colgroup" align="center"
                      valign="middle" title="title" width="33%"
                      span="2" />
                  <thead>
                    <tr>
                      <th scope="col">Invoice No</th>
                      <th scope="col">Invoice Line No.</th>
                      <th scope="col">Date invoiced</th>
                    </tr>
                  </thead>
                  <tbody>
        <tr id="table-element" ng-repeat="purchaseInvoiceLine in purchaseInvoiceLines">
          <td>{{purchaseInvoiceLine.purchaseInvoiceId}}</td>
          <td>{{purchaseInvoiceLine.purchaseInvoiceLineId}}</td>
</tbody>
                </table>
              </div>

这是第二个表格的div。我认为div也应该在控制器内......

Answer 3

这是整个控制器：

    angular.module('pu', []).controller('purchaseInvoiceController', ['$scope', '$http', function($scope, $http) {

  var createURL = "http://localhost:8080/webapi/purchaseInvoices/create";
  var updateURL = "http://localhost:8080/webapi/purchaseInvoices/update";
  var allPurchaseInvoices = "http://localhost:8080/webapi/purchaseInvoices";
  var lines = "http://localhost:8080/webapi/purchaseInvoices/1/lines";

  $scope.purchaseInvoice = {};
  $scope.purchaseInvoiceLine = {};
  $scope.editBtn = false;

  $http.get(allPurchaseInvoices).then(function(response) {
    $scope.purchaseInvoices = response.data;
  });

  /*$http.get(lines).then(function(response) {
    $scope.purchaseInvoiceLines = response.data;
  });*/


  $scope.getLines = function(purchaseInvoice) {
    $http.get('http://localhost:8080/webapi/purchaseInvoices/' + purchaseInvoice.purchaseInvoiceId + '/lines').then(function(json){
      $scope.purchaseInvoiceLines = json.data;
      alert('done! ' + $scope.purchaseInvoiceLines[0].lineAmount);
    });
  }

  /*$scope.getLines = funtion(purchaseInvoice) {
    $scope.get('http://localhost:8080/webapi/purchaseInvoices/' + purchaseInvoice.purchaseInvoiceId + '/lines').then(function(response) {
      $scope.purchaseInvoiceLines = response.data;
    });
  }*/

  $scope.createPurchaseInvoice = function() {
    $http.post(createURL, $scope.purchaseInvoice).success(function(response) {
      $http.get(allPurchaseInvoices).then(function(response) {
        $scope.purchaseInvoices = response.data;
        alert('Purchase Invoice has been created!');
      });
    });
  }

  $scope.editPurchaseInvoice = function(purchaseInvoice) {
    $scope.purchaseInvoice = purchaseInvoice;
  }

  $scope.update = function() {
    $http.put(updateURL, $scope.purchaseInvoice).success(function(response) {
      $http.get(allPurchaseInvoices).then(function(response) {
        $scope.purchaseInvoices = response.data;
        alert('Purchase Invoice has been updated!');
      });
    });
  }

  $scope.delete = function(purchaseInvoiceId) {
    var result = confirm('Are you sure?');
    if (result === true) {
      $http.delete(allPurchaseInvoices + '/' + purchaseInvoiceId).success(function(response) {
        $http.get(allPurchaseInvoices).then(function(response) {
          $scope.purchaseInvoices = response.data;
          alert('Purchase Invoice Deleted!');
        });
      });
    }
  }

}]);

单击另一个表中的元素时，表不会重新加载

3 个答案: