Angular.js - ng-repeat 不显示更新的数组

Posted

技术标签:

【中文标题】Angular.js - ng-repeat 不显示更新的数组【英文标题】:Angular.js - ng-repeat not showing updated array 【发布时间】:2018-09-01 03:23:28 【问题描述】:

当我使用 AJAX 请求时,我的代码可以完美地从数组中读取数据。但是,当我将对象推送到数组时,ng-repeat 不会呈现新行,我必须刷新页面才能获取发送到服务器的数据。

为什么要这样做? 谢谢

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>

【问题讨论】:

更多关于你为什么shouldn't use jQuery with AngularJS 【参考方案1】:

那是因为您同时使用 jQuery 和 Angular。不要那样做。曾经。 Angular 不知道 jQuery 在做什么,jQuery 也不知道 Angular 在 DOM 中生成了什么。解决方案:删除 jQuery 并使用 Angular 自己的$http 服务。

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

【讨论】:

【参考方案2】:

更新文档。使用范围应用作为快速修复。不是这样做的方式。但它会很快解决你的问题。在我的手机上,如果我不忘记稍后更新此评论,提供更多详细信息和最佳实践。现在,谷歌搜索范围应用将帮助你很长的路要走。

【讨论】:

以上是关于Angular.js - ng-repeat 不显示更新的数组的主要内容,如果未能解决你的问题,请参考以下文章

Angular JS 面包屑

延迟 angular.js $http 服务

Angular JS 中 指令详解

Angular.js实现折叠按钮的经典指令.

angular-resource.js encodeUriSegment 问题

angular.js前端分层开发(页面和js代码分离,并将js代码分层)