Question

我正在尝试在一个有趣的项目中学习Angular，并遇到了一个我无法找到解决方案的问题。

当页面加载时，我从Web API方法获取数据并将结果放在vm.Locations中。这些结果最终会使用转发器显示在页面上。

稍后，在Google的Places API返回特定位置数据（单个记录）后调用createLocation。该数据被发布到Web API方法，如果成功，我将其结果推送到vm.Locations。

在初始页面加载时，所有内容都正确加载。稍后调用createLocation并且mc.locations.length绑定显示正确的更新值，但是转发器中的结果元素永远不会更新以显示新元素。

我认为$ scope。$ apply不是必需的，因为array.length似乎正在正确解析，但我暂时没有想法。

以下是主要内容：

Page：

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

控制器：

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

在createLocation的成功回调中和代码中：

vm.locations.push（的数据）;

确保API返回的数据格式正确，并具有Name和FormattedAddress属性。记录此数据或在调试器上检查

AngularJS Repeater在从POST接收新值后不更新

1 个答案: