Angularjs ng-repeat n'est pas mise à jour lorsque les changements de modèle
J'Ai ce code dans mon projet. J'essaie d'ajouter des données à partir de la base de données à l'aide de $http, mais ng-repeat n'est pas de mise à jour de la table, montre qu'une ligne vide.
Lorsque je vérifie le champ d'application, les données sont déjà là.
J'ai lu beaucoup de réponses, mais ils ne semblent pas être lié à mon problème.
<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>
Contrôleur:
.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);
});
}])
EDIT:
J'ai trouvé!
Le problème est de cette façon que la récupération de données est enveloppé
$scope.tweets.push(t[0])
S'il vous plaît n'oubliez pas de créer une réponse, et la balise. Si les gens ne passent pas leur temps à répondre à une question ouverte. 🙂
OriginalL'auteur Charger513 | 2014-08-28
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin d'appliquer à la portée
C'est un excellent post de blog qui explique cela:
http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
La raison pour laquelle votre
ng-repeat
n'est pas mise à jour après le $requête http est due à l' $http est asynchrone et javascript de votre tour pour que le contrôleur ait fini avant que la réponse est de retour à partir de votre $requête http. Donc, vous devez en aviser le champ d'application que les choses ont changé et les pousser à la portée.Pas de problème. Si elle est correcte, il marque que correct!
Je vais vérifier le blog et de voir si je peux résoudre ce problème, merci!
Je pense que le problème est portée.regarder , devrait être portée.watchCollection, comme la collection des changements, pas les tweets de référence. Vous n'avez pas à appeler de la portée.$s'appliquent.
J'ai essayé avec la portée.watchCollection mais il fait la même chose
OriginalL'auteur Mohamed El Mahallawy
Le problème est de cette façon que la récupération de données est enveloppé
au lieu de cela:
ce:
OriginalL'auteur Charger513
Il y a la voie de la facilité et de la bonne façon.
C'est le moyen le plus facile
Dans votre code en appelant
Ce est la bonne façon.
https://docs.angularjs.org/api/ng/service/$q
Votre appel HTTP enveloppé dans un $q promesse. Puis, quand il est soit de réussir ou d'erreur, puis l'accomplissement de la promesse. Le répéteur va honorer la promesse.
OriginalL'auteur Brian
Pour quelqu'un d'autre qui peut rencontrer ce genre de problème où l'INTERFACE n'est tout simplement pas à jour même après avoir fait un $s'appliquent ou de coller à l'intérieur d'un $timeout. J'ai viens de réaliser que j'ai fait une erreur stupide et avait ajouté :: pour l'embarqué propriété et oublié.
Si j'ai eu mon ng-repeat et à l'intérieur j'ai eu un
{{ ::item.name }}
. Pour ceux d'entre vous qui ne savent pas ce que le ::; il raconte angulaire de définir les données et établit pas de montres supplémentaire, qui, à son tour, puis s'arrête angulaire essayer de mettre à jour la propriété. C'est utile pour les données que vous savez ne pourra jamais le changer. Voir le lien ci-dessous pour plus d'informations sur une fois les liaisons:http://blog.thoughtram.io/angularjs/2014/10/14/exploring-angular-1.3-one-time-bindings.html
Si ma solution était tout simplement de supprimer l' :: donc:
{{ ::item.name }}
est devenu{{ item.name }}
OriginalL'auteur Neil Palethorpe