角。js - ng-repeat，未显示更新后的数组

I have got code that reads the data from the array perfectly when I use a AJAX request. When I push an object to the array however, ng-repeat doesn't render the new row and I have to refresh the page to then fetch the data that was sent to server.

我有一些代码可以在使用AJAX请求时完美地从数组中读取数据。然而，当我将一个对象推到数组中时，ng-repeat不会呈现新的行，我必须刷新页面，然后获取发送到服务器的数据。

Why does it do this? Thanks

为什么会这样?谢谢

Javascript

function processError() {
        var responseCode = 404;
        var error = {};
        error["client"] = document.getElementById('client').value;
        error["errorMessage"] = document.getElementById('error-message').value;
        error["simpleRes"] = document.getElementById('simple-fix').value;
        error["fullRes"] = document.getElementById('full-fix').value;
        error["reason"] = document.getElementById('reason').value;

        var errorJson = JSON.stringify(error);

        $.ajax({
            url: "../ErrorChecker/rest/error",
            type: "POST",
            data: errorJson,
            contentType: "application/json"
        })
            .done(function (data, statusText, xhr, displayMessage) {
                $('.form').hide();
                responseCode = xhr.status;
                reloadData(data);
            });

        function reloadData(data) {
            if (responseCode == 200) {
                processPositiveResponse(data);
            } else {
                $('#negative-message').show(1000);
            }
        }
    }

function processPositiveResponse(data) {
        $('#positive-message').show(1000);
        updateTable(data);
        $('#errorTable').DataTable().destroy();
        setupTable();
        clearInputs();
        console.log($scope.controller.errors);
    }

function updateTable(data) {
        $scope.controller.errors.push({
            "id": data,
            "client": document.getElementById('client').value,
            "errorMessage": document.getElementById('error-message').value,
            "simpleRes": document.getElementById('simple-fix').value,
            "fullRes": document.getElementById('full-fix').value,
            "reason": document.getElementById('reason').value
        })
    }

HTML

<tbody>
    <tr ng-repeat="x in dataCtrl.errors">
        <td class="collapsing">
            <div class="ui toggle checkbox">
                <input type="checkbox">
                <label></label>
            </div>
        </td>
        <td style="display: none">{{ x.id }}</td>
        <td>{{ x.client }}</td>
        <td>{{ x.errorMessage }}</td>
        <td>{{ x.simpleRes }}</td>
        <td>{{ x.fullRes }}</td>
        <td>{{ x.reason }}</td>
    </tr>
</tbody>

3 个解决方案

#1

That's because you're using jQuery and Angular together. Don't do that. EVER. Angular is not aware of what jQuery is doing, and jQuery is not aware of what Angular is generating in the DOM. Solution : REMOVE jQuery and use Angular's own $http service.

这是因为您使用了jQuery和角化。不要这样做。永远。angle不知道jQuery在做什么，jQuery也不知道在DOM中生成的是什么。解决方案:删除jQuery并使用自己的$http服务。

The same way, don't use document.getElementById('full-fix').value. You're taking Angular backwards. Angular generates the DOM from data, so you don't need to select DOM elements to read their value because that value is already in your data.

同样，不要使用document.getElementById('full fix').value。你倒角。角从数据生成DOM，因此不需要选择DOM元素来读取它们的值，因为该值已经在数据中。

#2

AngulerJS cannot catch jQuery callback so we need to force AngulerJS to update data. We need to use $scope.$apply to force AngulerJS for update callback data.

AngulerJS无法捕获jQuery回调，因此需要强制AngulerJS更新数据。我们需要使用$scope。$apply to force AngulerJS for update callback数据。

$scope.$apply(function() { $scope.data= data; });

适用范围。美元(函数(){ $范围。data =数据;});

#3

-1

Update the document. Use scope apply as a quick fix. Not the way to do it imo. But it will solve your problem fast. On my mobile if I do not forget ill update this comment later with more details and best practises. For now a google search to scope apply will help you a long way.

更新文档。使用范围作为快速修复。在我看来不是这样的。但它会很快解决你的问题。在我的手机上，如果我不忘记，我将更新这条评论更多的细节和最好的实践。现在谷歌搜索范围应用将帮助您很长一段路。

#1