当模型更改时，Angularjs ng-repeat不会更新

Question

我在我的项目中有此代码。我尝试使用$ http从数据库添加数据，但ng-repeat不更新de表，只显示一个空行。

当我检查范围时，数据已经存在。 我读过很多答案，但他们似乎并没有涉及到我的问题。

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

您需要申请范围

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

这是一个伟大的博客文章，解释它：

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

你的原因由于$ http请求是由于$ http异步而导致未更新，并且在响应从您的$ http请求返回之前，您的JavaScript转向控制器已完成。所以你必须通知范围，事情已经改变，并推到范围。

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

对于其他人谁可能会遇到这个问题，即UI只是不更新​​ - 即使在执行$ apply或$ timeout超时之后。我刚刚意识到我犯了一个愚蠢的错误，并将::添加到嵌入式属性中，并将其遗忘。

所以我有我的重复和内部我有一个{{ ::item.name }}。对于那些不知道::做什么的人，它会通知角度来设置数据，而不是设置任何其他手表，而手表则会停止尝试更新该属性的角度。这对你知道永远不会改变的数据很有用。请参见以下链接的详细信息，一次绑定： http://blog.thoughtram.io/angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html

所以我的解决办法只是删除::这样：{{ ::item.name }}成为{{ item.name }}