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

Question

My AngularJS app displays data in a table using ng-repeat . AngularJS makes a GET request, which retrieves an array. The table correctly displays the elements of the array.

The page contains a button that calls a function to modify the array. However, the table is not updated to reflect the modified array.

I have tried the following:

• Calling $scope.apply() after the update.
• Enclosing the update within a function passed to $scope.apply() as in $scope.apply(function...) . Link
• Using $timeout Link

None of these attempts worked. Additionally, I believe that ng-repeat calls apply() itself.

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

Your issue is that you have the controller defined twice.

If you're calling the controller twice it will call a new instance of the same controller.

Meaning that the $scope you're manipulating on the button isn't the same as the $scope on the ng-repeat.

Demo of your issue: https://jsfiddle.net/U3pVM/26753/ (showing different scopes)

Remove the ng-controller attribute around the parent of the button, and wrap your whole template.

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

Working example: https://jsfiddle.net/U3pVM/26752/

Note: I've removed the $http request inside just for demo purposes.

Additionally, seeing as you're using ng-click to with SendData there's no need to run scope.$apply(); as ng-click will trigger a new digest cycle internally.

Answer 2

You just have defined your myData variable in myApp2 module and its controller scope, However the displaying array table is out of your module scope ng-app . Surround your table html code with ng-app , It may work correctly.