Question

我还是Angularjs的新手还在学习它。

我的问题是，当我定义一个数组并使用＆＃34; ng-repeat＆＃34; ng-repeat中的项目在函数运行后不会更新。这是一个jsfiddle的例子。

http://jsfiddle.net/ematevosyan/t3ruzytk/8/

function MyCtrl($scope) {

    // init google maps auto complete input
    var options = {
        types: ['(cities)']
    },
    input = document.getElementById('searchTextField'),
        autocomplete = new google.maps.places.Autocomplete(input, options);

    // sample array
    $scope.testArray = [{
        name: 'item1'
    }];

    // function to test a push into array
    $scope.testPush = function () {
        $scope.testArray.push({
            name: 'item2'
        });
    }

    // change listener for google input autocomplete
    $scope.inputChanged = google.maps.event.addListener(autocomplete, 'place_changed', function () {

        // set var as location
        $scope.specificLocation = autocomplete.getPlace().formatted_address;
        //alert($scope.specificLocation);

        $.ajax({
            type: 'GET',
            url: 'https://api.github.com/repos/bvasko/Bootstrap-Select-Box',
            async: false,
            contentType: "application/json",
            dataType: 'jsonp',

            success: function (data) {
                alert(data);
                $scope.testArray.push({
                    name: $scope.specificLocation
                });
            }, 

            error: function (e) {
                console.log(e.message);
            }


        }); // end ajax call



    });


}

正如您所看到的，示例按钮按预期工作，当您单击它时，它会将新项目推送到数组中并更新ng-repeat。但是，一旦在输入字段中输入位置并更新了数组，新项目就会被推入数组，但ng-repeat项目不会被推送到数组中。我需要它在用户输入位置时立即更新ng-repeat项目。

我尝试过使用Angular的$ http而不是$ ajax，我也试过使用$ apply两者都没有效果。我觉得我错过了一些简单但不知道的东西。

Answer 1

尝试：

$scope.$apply();

将对象插入数组后

。

来自文档：

＆＃34; $ apply（）用于从角度框架外部以角度执行表达式。（例如，来自浏览器DOM事件，setTimeout，XHR或第三方库）。因为我们正在调用角度框架，所以我们需要执行异常处理的适当范围生命周期，执行手表。＆＃34;

https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope＃$应用

JSFiddle：http://jsfiddle.net/yn0u67fo/

Answer 2

使用$.ajax和$apply并不是有条理的方式。您应该尝试使用$http调用api：

$http.jsonp('https://api.github.com/repos/bvasko/Bootstrap-Select-Box?callback=JSON_CALLBACK')
    .then(function (response) {
        $scope.testArray.push({
            name: $scope.specificLocation
        });
    });

参见 your updated fiddle

在AJAX调用后，Angularjs数组不会更新

2 个答案: