Comment regarder un tableau pour les changements dans AngularJS

En gros, je veux l'équivalent de la liaison à "ajouter" et "supprimer" les événements de la colonne vertébrale des Collections. Je vois, en gros, plus moyen de faire cela dans AngularJS, et la solution actuelle, nous avons réglé pour est $watch()ing du tableau length et manuellement de comparaison/recalculer l'ensemble de la chose. Est-ce vraiment ce que les cool kids faire?

Modifier: plus Précisément, de regarder la longueur du tableau signifie que je n'ai pas facilement savoir quel élément a été changé, j'ai besoin d'manuellement "diff".

  • Est-il quelque chose de spécifique que vous voulez faire? Quel est le problème avec $de regarder la longueur du tableau?
  • Édité, je veux juste savoir où l'élément a été changé
  • Angulaire de la liaison de données fonctionne comme les événements; ce que vous devez faire est de changer la façon de penser. Pourquoi avez-vous réellement besoin de savoir que?
  • regarder la longueur n'est pas sûr. Il peut y avoir plusieurs changements dans la matrice observée dans la même empreinte cycle, rendant le spectateur ne pas tirer du tout. par exemple, array.splice(0,1,"hello")
  • par exemple, j'ai une liste de choses (disons, todos) et le serveur est en attente de recevoir les notifications qui ont été supprimé/ajouté
  • Vous pouvez simplement créer add et remove fonctions dans le contrôleur qui ne qui et pousse à la matrice. Il est presque toujours une bonne idée de ne pas accéder à des fonctions directement à partir de la view. Il ne doit pas contenir toute la logique métier.

InformationsquelleAutor abyx | 2013-03-28
  1. 31

    Je pense que l'utilisation $montre est une bonne solution, mais $watchCollection peut être mieux pour vous. $watchCollection n'effectue pas de comparaison en profondeur et juste watchs pour la modification de la matrice comme d'insérer, de supprimer ou de tri (pas d'élément de mise à jour).

    Par exemple, si vous voulez garder un attribut order synchroniser avec le tableau de commande :

    $scope.sortableItems = [
    {order: 1, text: 'foo'},
    {order: 2, text: 'bar'},
    {order: 3, text: 'baz'}
];

$scope.$watchCollection('sortableItems', function(newCol, oldCol, scope) {
    for (var index in newCol) {
        var item = newCol[index];
        item.order = parseInt(index) + 1;
    }
});

    Mais pour ton problème, je ne sais pas si il y a une meilleure solution que de parcourir manuellement la matrice d'identifier le changement.

    InformationsquelleAutor Noémi Salaün
  2. 12

    La façon de regarder un tableau dans Angulaire est $watch(array, function(){} ,true)

    • C'est une profonde regarder. Vous avez probablement n'avez pas besoin que, dans la plupart des cas.
    • Als: Merci, mais cela ne me dites pas d'élément qui a été supprimé/ajouté. J'ai édité la question pour faire plus clair 🙂
    • en fait vous ne, voir mon commentaire sur la question de l'op
    InformationsquelleAutor Jason Als
  3. 3

    Je voudrais créer un enfant étendues et les regarder individuellement.
    voici un exemple:

    $scope.myCollection = [];
var addChild = function()
{
  var Child = $scope.$new();
  Child.name = 'Your Name here';

  Child.$watch('name', function(newValue) {
     //.... do something when the attribute 'name' is changed ...
  });

  Child.$on('$destroy', function() {
    //... do something when this child gets destroyed 
  });


  $scope.myCollection.push(Child); //add the child to collection array

};

//Pass the item to this method as parameter, 
//do it within an ngRepeat of the collection in your views 
$scope.deleteButtonClicked = function(item)
{
  var index = $scope.myCollection.indexOf(item); //gets the item index
  delete $scope.myCollection[index]; //removes the item on the array
  item.$destroy(); //destroys the original items
}
    InformationsquelleAutor Raftalks
  4. 0

    Veuillez nous en dire plus sur votre cas d'utilisation. L'une des solutions de suivi de l'élément de persistance est à l'aide de ngRepeat directive à la coutume de la directive que l'écoute de l'élément de $détruire événement: 

    <div ng-repeat="item in items" on-delete="doSomething(item)">

angular.module("app").directive("onDelete", function() {
    return {
        link: function (scope, element, attrs) {
            element.on("$destroy", function () {
                scope.$eval(attrs.onDelete);
            });
        }
    }
});
    • C'est gentil mais je n'ai pas envie de faire mon MVC lier les éléments dans la vue de savoir quand quelque chose dans mon modèle a changé, c'est la bonne façon de faire...?
    • Oui. Une autre solution est la création de Modèle et les classes de Collection comme la colonne vertébrale.
    InformationsquelleAutor ardentum-c
  5. 0

    Peut-être la solution est de créer la collection de la classe ( comme l'épine dorsale ne ) et vous pouvez brancher dans les événements assez facilement ainsi.

    La solution je l'ai fait ici n'est pas vraiment complet, mais devrait vous donner une orientation générale sur la façon dont cela pourrait être fait, peut-être.

    http://beta.plnkr.co/edit/dGJFDhf9p5KJqeUfcTys?p=preview

    InformationsquelleAutor ganaraj