anglejs - アレイの更新時にng-repeatが更新されない

Question

AngularJSアプリは、ng-repeatを使用してテーブルにデータを表示します。 AngularJSはGETリクエストを作成し、配列を取得します。テーブルには配列の要素が正しく表示されます。

ページには、配列を変更する関数を呼び出すボタンが含まれています。ただし、テーブルは変更された配列を反映するように更新されません。

私は次のことを試してみました：

• 更新後$scope.apply()を呼び出します。
• $scope.apply()に渡された関数内の更新を囲みます。 $scope.apply(function...)のようになります。これらの試みの$timeoutLink

noneを使用して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

問題はコントローラが2回定義されていることです。

コントローラーを2回呼び出すと、同じコントローラーの新しいインスタンスが呼び出されます。

ボタンで操作している$ 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要求を削除しました。新しいが内部サイクルを消化トリガするscope.$apply();ng-clickとして実行する必要はありませんSendDataとに

また、あなたが使用しているとして見てNGをクリックします。

Answer 2

あなただけが表示され、配列表が、モジュールの範囲外である、myApp2モジュールとそのコントローラの範囲であなたのmyData変数を定義していますng-app。 テーブルのHTMLコードをng-appで囲むと正しく動作することがあります。