AngularJS RepeaterがPOSTから新しい値を受け取った後に更新しない

Question

私は楽しいプロジェクトでAngularを取り組もうとしており、解決策を見つけることができなかった問題に遭遇しました。

ページが読み込まれると、Web APIメソッドからデータが取得され、結果がvm.Locationsに格納されます。これらの結果は、リピータを使用してページに表示されます。

後で、GoogleのPlaces APIが特定の位置データ（単一のレコード）を返すと、createLocation getが呼び出されます。そのデータはWeb APIメソッドに投稿され、成功した場合はその結果をvm.Locationsにプッシュします。

初期ページの読み込み時に、すべてが正しく読み込まれます。後でcreateLocationが呼び出され、mc.locations.lengthバインディングが適切な更新値を示しますが、リピータの結果の要素は更新されずに新しい要素が表示されます。

array.lengthが正しく解決されているように見えるので、$ scope。$ applyは必要ではないはずですが、私は現時点でアイデアがありません。ここで

主な作品は：

ページ：

<div ng-controller="MapController as mc"> 
    <h1>Locations ({{mc.locations.length}})</h1> 
    <table> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Address</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="location in mc.locations"> 
       <td>{{location.Name}}</td> 
       <td>{{location.FormattedAddress}}</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

コントローラ：createLocationの成功コールバックで、コード内

function MapController($http) { 
    var vm = this;  
    var dataService = $http;   
    vm.locations = []; 

    vm.createLocation = function(location) {     
      var locationData = { 
       Name: location.name, 
       PlaceId: location.place_id, 
       FormattedAddress: location.formatted_address, 
       Latitude: location.geometry.location.lat(), 
       Longitude: location.geometry.location.lng() 
      } 

      var config = { 
       headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' } 
      } 

      dataService.post("api/Location/AddLocation", locationData) 
      .success(function (data, status, headers, config) { 
       vm.locations.push(data);      
      }) 
      .error(function (data, status, header, config) {     
       alert(status); 
      }); 

     } 

    function getAllSavedLocations() { 
     dataService.get("/api/Location/GetAllLocations") 
     .then(function (result) { 

      angular.extend(vm.locations, result.data);     

      vm.locations.forEach(function (place) { 
       bounds.extend(new google.maps.LatLng(place.Latitude, place.Longitude)); 
       vm.addLocationToMap(place.Name, place.Latitude, place.Longitude); 
      }); 
     }, 
     function (error) { 
      handleException(error); 
     }); 
    } 

    ... 

} 

Answer 1

：

vm.locations .push（データ）;

APIによって返されたデータが正しい形式であり、NameおよびFormattedAddressプロパティを持っていることを確認してください。このデータをログに記録するか、デバッガで検査してください