AngularJS Repeater wird nicht aktualisiert, nachdem ein neuer Wert von POST empfangen wurde

Question

Ich versuche, Angular in einem spaßigen Projekt zu lernen und bin auf ein Problem gestoßen, bei dem ich nicht in der Lage war, die Lösung zu finden.

Wenn die Seite geladen wird, erhalte ich Daten von einer Web-API-Methode und legte die Ergebnisse in vm.Locations. Diese Ergebnisse werden auf der Seite mit einem Repeater angezeigt.

Später wird createLocation get aufgerufen, nachdem Google Places API bestimmte Standortdaten (einen einzelnen Datensatz) zurückgibt. Diese Daten werden an eine Web-API-Methode gesendet und wenn es erfolgreich ist, schiebe ich das Ergebnis in vm.Locations.

Beim ersten Laden der Seite wird alles ordnungsgemäß geladen. Später wird createLocation aufgerufen, und die Bindung von mc.locations.length zeigt den richtigen aktualisierten Wert, jedoch werden die resultierenden Elemente im Repeater nie aktualisiert, um das neue Element anzuzeigen.

Ich dachte, dass $ scope. $ Apply sollte nicht notwendig sein, da die array.length scheint korrekt zu lösen, aber ich bin für den Moment aus Ideen.

Hier sind die wichtigsten Teile:

Seite:

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

Controller:

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

Im Erfolg Rückruf von createLocation und im Code:

vm.locations .push (Daten);

Stellen Sie sicher, Daten zurückgegeben von Ihrer API ist im richtigen Format und haben die Namen und die FormatedAddress Eigenschaften. Protokollieren Sie diese Daten oder überprüfen Sie sie auf Debugger