Question

我的AngularJS应用使用ng-repeat在表格中显示数据。 AngularJS发出一个GET请求，它检索一个数组。该表正确显示了数组的元素。

该页面包含一个调用函数来修改数组的按钮。但是，表未更新以反映修改后的数组。

我尝试了以下内容：

更新后致电$scope.apply()。
将更新包含在传递给$scope.apply()的函数中，如下所示 $scope.apply(function...)。 Link
使用$timeout Link

这些尝试都没有奏效。另外，我相信ng-repeat会调用apply()本身。

AngularJS

<script>
    var app2 = angular.module('myApp2', []);

    app2.controller('StocksController', function ($scope, $http, $timeout) {
        // When the page loads...
        // Load myData with REST GET
        $http.get("http://example.com/exWebAPI/api/Ticker/").then(function (response) {
            $scope.myData = response.data;
        });

        // Update the array
        $scope.SendData = function () {
            alert('Hello from SendData.');
            $scope.myData.splice(0, 2);
            $scope.$apply();
        };

    });
</script>

HTML

<div ng-app="myApp2" ng-controller="StocksController">
    <h2>Reportable Tickers</h2>

    <p>
        <a href="#" ng-click='AddTicker()'>Add Ticker</a>
    </p>

    <table class="table">
        <tr>
            <th>
                Symbol
            </th>
            <th></th>
        </tr>

        <tr ng-repeat="x in myData">
            <td>
                {{ x.Ticker }}
            </td>
            <td>
                <a href="#" ng-click='EditTicker(x.Ticker)'>Edit</a> |
                <a href="#" ng-click='DetailsTicker(x.Ticker)'>Details</a> |
                <a href="#" ng-click='DeleteTicker(x.Ticker)'>Delete</a>
            </td>
        </tr>

    </table>

    <hr />
    <div>

        <div ng-controller="StocksController">
            <button ng-click="SendData()">Submit</button>
            <button ng-click="QueryData()">Query Data</button>
            <hr />
        </div>
    </div>
</div>

Answer 1

您的问题是您已将控制器定义了两次。

如果您正在调用控制器两次，它将调用同一控制器的新实例。

意味着您在按钮上操作的$ scope与ng-repeat上的$ scope不同。

演示您的问题：https://jsfiddle.net/U3pVM/26753/（显示不同的范围）

删除按钮父级周围的ng-controller属性，并包装整个模板。

<div ng-app="myApp2" ng-controller="StocksController">
  <table class="table">
    <tr>
      <th>
        Symbol
      </th>
      <th></th>
    </tr>

    <tr ng-repeat="x in myData">
      <td>
        {{ x.Ticker }}
      </td>
      <td>
        <a href="#" ng-click='EditTicker(x.Ticker)'>Edit</a> |
        <a href="#" ng-click='DetailsTicker(x.Ticker)'>Details</a> |
        <a href="#" ng-click='DeleteTicker(x.Ticker)'>Delete</a>
      </td>
    </tr>

  </table>

  <hr />
  <div>

    <div>
      <button ng-click="SendData()">Submit</button>
      <hr />
    </div>
  </div>
</div>

工作示例：https://jsfiddle.net/U3pVM/26752/

注意：我之前删除了$http请求仅用于演示目的。

此外，当您使用ng-click to SendData时，无需运行scope.$apply(); ng-click将在内部触发新的摘要周期。

Answer 2

您刚刚在myData模块中定义了myApp2变量及其控制器范围，但显示数组表超出了模块范围ng-app。使用ng-app将表格html代码包围，它可能正常工作。

angularjs - ng-repeat不更新数组更新

2 个答案: