AngularJS regarder une propriété de l'objet dans un tableau d'objets

J'ai cette data dans mon contrôleur

    $scope.data = {
        home: {
            baseValue: "1",
            name: "home"
        },
        contact: {
            baseValue: "2",
            name: "contract"
        }
     //a lot more options
    };

avec le code html comme ceci:

<section class="content row" ng-repeat="item in data">
   {{item.name}}
   ....
</section>

Maintenant, je veux savoir quand le baseValue est changé, mais en raison de I en utilisant l'un des objets à l'intérieur de la variable de données, je ne peux pas watch la propriété de façon plus simple.

J'ai essayé quelque chose comme ça, mais je boucle le tableau

$scope.$watch('data', function (newValue, oldValue, scope) {
 //some code to compare the tow arrays, line by line
}, true);

Comment puis-je faire un simple $watch savoir que lorsque le baseValue est changé?

Des questions similaires:

Mise à JOUR 1

Je pourrais ajouter une montre, pour chaque objet, à savoir lorsque le baseValue est modifié, mais il ne sera pas bien si j'ai eu un n nombre d'objets, pas seulement quelques objets, comme dans cet exemple

$scope.$watch('data.home', function (newValue, oldValue, scope) {
 //do some stuff with newvalue.baseValue
}, true);

$scope.$watch('data.contact', function (newValue, oldValue, scope) {
 //do some stuff with newvalue.baseValue
}, true);
... //Adds more individual `watch`

Vous voulez seulement savoir quand baseValue a changé, mais vous ne voulez pas d'ajouter une personne à surveiller?
À propos de la mise à jour 1, pouvez-vous définir "pas gentil" ?
comment sur l'utilisation de propriété descripteurs, et de revenir à *Timeout's?
Avez-vous besoin de connaître l'ancienne valeur? Ou vous avez juste besoin de regarder pour les changements?
Ou $watchGroup ? Une variante de $watch() où il regarde un tableau de watchExpressions. Si une expression dans la collection change le port d'écoute est exécutée.

InformationsquelleAutor Coyolero | 2014-07-22

angularjs javascript

35

Basé sur votre question, vous pouvez utiliser ngChange pour regarder les changements de baseValue et de déclencher la fonction.

HTML
```
<section class="content row" ng-repeat="item in data">
    Name: {{item.name}} <br/>
    BaseValue: <input type="text" ng-model="item.baseValue" ng-change="baseValueChange(item.baseValue)"/>
</section>
```
Contrôleur
```
$scope.baseValueChange = function(baseValue) {
    console.log("base value change", baseValue);
}
```
Si vous avez une version plus sophistiquée qui peut obtenir oldValue et newValue, vous pouvez vous référer à ce plunkr - http://plnkr.co/edit/hqWRG13gzT9H5hxmOIkO?p=preview

HTML
```
<section class="content row" ng-repeat="item in data">
    Name: {{item.name}} <br/>
    BaseValue: <input type="text" ng-init="item.oldBaseValue = item.baseValue" ng-model="item.baseValue" ng-change="baseValueChange(item.oldBaseValue, item.baseValue); item.oldBaseValue = item.baseValue"/>
</section>
```
Contrôleur
```
$scope.baseValueChange = function(oldVal, newVal) {
    console.log("base value change", oldVal, newVal);
}
```
- Cela a fonctionné pour moi, mais ce n'est pas vrai qu'en utilisant ng-change le rendement pourrait être impacté? C'est parce que la fonction sera exécutée non seulement lorsque la valeur est modifiée. Pour cette raison, il est préférable d'utiliser un wath pour s'assurer que la fonction est exécutée uniquement lorsque les données sont mises à jour. Est-ce exact?
- Je pense que pas très différente de comparer à regarder. Vous voudrez peut-être comparer le numéro de port d'écoute s'inscrire dans l'entre-ng-changement et de regarder. Je pense que c'est le même.
- Je suis d'accord avec +Coyolero. La solution de @Jerska offert correspond à la question mieux dans mon cas
- Je ne pense pas que c'est une bonne réponse car il ne sera déclenchée que sur les mises à jour du contrôle d'entrée et pas de code
- des œuvres. se sent hacky.
InformationsquelleAutor hutingung
14

Vous pouvez regarder un attribut de l'objet.

Si vous pouvez faire quelque chose comme
```
for(var key in $scope.data) {
  if($scope.data.hasOwnProperty(key)) {
    $scope.$watch("data['" + key + "'].baseValue", function(val, oldVal) {
      //Do stuff
    });
  }
}
```
Pas testé, mais l'idée est simple.
- J'ai juste commencé à apprendre le AngularJS il y a deux jours. Je l'aime jusqu'à présent. Cette solution est exactement ce dont j'ai besoin. J'ai remarqué que le ng-change directive ne fonctionne qu'avec les valeurs modifiées par l'interaction lié aux intrants (cases à cocher dans mon cas). Je veux faire quelque chose lorsque les éléments du tableau baseValues changement, peu importe si ils ont changé de tenu entrées ou par programmation basculement entre eux.
- Cet objectif devrait être atteint en utilisant $scope->$apply() après une modification. (Voir docs.angularjs.org/api/ng/type/$rootScope.Portée)
- Mes changements sont déjà en cours au sein de l'angulaire contexte, et donc $scope.$apply() n'est pas autorisé (il est dit $digest() est déjà le cas). Cependant, je suis un peu plus expérimenté angulaire et le problème peut avoir été liée à des étendues et des appels asynchrones.
- Si les éléments vont et viennent, vous devez également supprimer le obsolètes watchers: var w = $scope.$watch(...); et plus tard, juste à appeler w(); pour annuler l'inscription.
- J'ai beaucoup utilisé AngularJS dans les derniers mois, et je ne suis toujours pas vraiment sûr de savoir comment les digest cycles de travail. Mais je crois qu'avec votre commentaire que vous n'avez pas ce problème ?
- $scope.$watch("data[" + key + "].baseValue" .....) n'a pas fonctionné pour moi, mais $scope.$watch("data['" + key + "'].baseValue" .....) n'
- Vous avez raison, j'ai oublié. Édité.
InformationsquelleAutor Jerska

Dans ce genre de scénario, il n'existe aucun moyen de contourner en utilisant plusieurs montres, une autre façon de le faire est en utilisant $watchCollection à regarder le tableau de valeurs de l'objet, vous pouvez vous procurer ce tableau à l'aide de la Object.values fonction.

scope.$watchCollection(function() {
    return Object.values(obj);
}, function(newValues, oldValues) {
    //now you are watching all the values for changes!
    //if you want to fire a callback with the object as an argument:
    if (angular.isFunction(scope.callback())) {
        scope.callback()(obj);
    }
});

InformationsquelleAutor svarog

J'ai résolu avec cette solution:

$scope.updateFields= function(){
    angular.forEach($scope.fields,function (value, key) {
        value.title = value.title.toLowerCase().replace(/\s+/g,'');
    })
};
$scope.$watch('fields', $scope.updateFields, true);

InformationsquelleAutor Ehsan Ali

Vous devez vous connecter pour publier un commentaire.