當模型更改時，Angularjs ng-repeat不會更新

Question

我在我的項目中有這個代碼。 我嘗試使用$ http從數據庫添加數據，但ng-repeat不更新de table，只顯示一個空行。

當我檢查范圍時，數據已經存在。 我已經閱讀了很多答案，但它們似乎與我的問題無關。

<div ng-controller="TweetsController">  
<table class="table table-striped table-bordered table-hover" width="100%">
    <thead>
        <tr>
            <th class="col-md-5"><i class="fa fa-fw fa-twitter text-muted hidden-md hidden-sm hidden-xs"></i> Texto</th>
            <th class="col-md-1 text-center"> Lista</th>
            <th class="col-md-1 text-center"> Cuenta</th>
            <th class="col-md-1 text-center"> Red</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="tuit in filtrado">
            <td>{{tuit.texto}}</td>
            <td class="text-center">{{tuit.lista.nombre}}</td>
            <td class="text-center">{{tuit.lista.cuenta.nombre}}</td>
            <td class="text-center">{{tuit.lista.cuenta.red.tipo}}</td>
        </tr>
    </tbody>            
</table>
<div>
    <pagination total-items="ufilter.length" itemsPerPage="itemsPerPage" ng-model="currentPage"></pagination>
</div>
</div>

控制器：

.controller('TweetsController', ['$scope','$http','filterFilter', function($scope,$http,filterFilter) {
    $scope.currentPage = 1;
    $scope.itemsPerPage = 10;
    $scope.filtrado = [];

    $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
    };

    // retrieve tweets
    $http.get('admin/twitter').success(function(tweets) {
        $scope.tweets = tweets;
    });

    $scope.saveTweet = function(isValid) {
        if(isValid) {
             var tuit = {
                texto: $scope.texto,
                lista_id: $scope.lista
            };

            $http.post('admin/twitter', tuit).success(function(t) {
                $scope.tweets.push(t);
            });
        }
    };

    $scope.filtrar = function(filtro) {
        if($scope.tweets != undefined) {
            $scope.ufilter = filterFilter(filtro, $scope.buscar);

            var inicio = ($scope.currentPage - 1) * $scope.itemsPerPage;
            var fin = inicio + $scope.itemsPerPage;

            $scope.filtrado = $scope.ufilter.slice(inicio, fin);
        }
    };

    $scope.$watch('tweets', function() {
        $scope.filtrar($scope.tweets);
    });

    $scope.$watch('currentPage', function() {
        $scope.filtrar($scope.tweets);
    });

    $scope.$watch('buscar', function() {
        $scope.filtrar($scope.tweets);
        $scope.setPage(1);
    });     

}])

編輯：

我解決了！

問題是如何包裝檢索數據的方式

$scope.tweets.push(t[0])

Answer 1

您需要申請范圍

 $http.get('admin/twitter').success(function(tweets) {
        $scope.tweets = tweets;
        $scope.$apply()
});

這是一篇很棒的博文，解釋了它：

http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

$ http請求導致ng-repeat未更新的原因是$ http是異步的，並且在響應從$ http請求返回之前，控制器的javascript轉向已完成。 因此，您必須通知范圍已發生變化並將其推送到范圍。

Answer 2

問題是如何包裝檢索數據的方式

而不是這個：

$http.post('admin/twitter', tuit).success(function(t) {
            $scope.tweets.push(t);
        });

這個：

$http.post('admin/twitter', tuit).success(function(t) {
            $scope.tweets.push(t[0]);
        });

Answer 3

有簡單的方法和正確的方法。

這是簡單的方法

//Utility Functions
function Digest($scope) {
    //this may not be future proof, if it isn't then you may have to try $timeout(function(){//do something})
    if (!$scope.$$phase) {
        try {
            //using digest over apply, because apply fires at root, and I generally don't need root.
            $scope.$digest();
        }
        catch (e) { }
    }
    //console.log('$scope snapshot:', $scope);
}

在您的代碼中通過調用使用它

        $http.post('admin/twitter', tuit).success(function(t) {
           Digest($scope.tweets.push(t));
        });

這是正確的方法。

https://docs.angularjs.org/api/ng/service/$q

將您的HTTP調用包含在$ q承諾中。 然后當它成功或錯誤時，履行承諾。 轉發器將兌現承諾。

Answer 4

對於任何可能遇到這個問題的人來說，即使在$ timeout或$ timeout內進行更新后，UI仍然沒有更新。 我剛剛意識到我犯了一個愚蠢的錯誤，並將::添加到了嵌入式屬性並忘記了它。

所以我有我的ng-repeat，里面有一個{{ ::item.name }} 。 對於那些不知道::做什么的人; 它告訴angular設置數據而不設置任何額外的手表，然后停止角度試圖更新該屬性。 這對於您知道不會更改的數據非常有用。 有關一次性綁定的更多信息，請參閱以下鏈接： http ： //blog.thoughtram.io/angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html

所以我的解決方案就是刪除:: so： {{ ::item.name }}成為{{ item.name }}