Comment surveiller les changements profonds d'un modèle, à partir de modèles?

Question

J'ai un modèle sur ma portée, qui est un objet d'objets. J'ai vu this, mais je veux le faire à partir du modèle car j'ai un filtre défini dessus.

var App = angular.module('app', []); 

App.controller('myCtrl', function($scope) { 
$scope.items = { 
    { name: 'Cricket bat', cost: '2500', quantity: 0}, 
    { name: 'Football', cost: '1100', quantity: 0} 
}; 
$scope.cartItems = {}; // This holds the items. I want quantity of each item separately so it's not an array. 

J'ai défini un filtre getPrice qui calcule le prix des articles dans les utilisateurs panier.

Et j'ai dans le modèle:

{{ cartItems | getPrice }} 

Est-il possible d'avoir la mise à jour du modèle après tout de la valeur de l'objet imbriqué (ie quantité de l'un des articles du panier.) Changements? Si oui, comment?

Answer 1

Déplacer le champ quantité à l'objet CartItem

$scope.items = { 
    { name: 'Cricket bat', cost: '2500'}, 
    { name: 'Football', cost: '1100'} 
}; 

$scope.cartItems = { 
    { name: 'Cricket bat', quantity: 3}, 
    { name: 'Football', quantity: 6} 
}; 

Ensuite, mettre à jour votre filtre getPrice sur la base du JSON ci-dessus. Cela devrait prendre soin de votre coût dans le panier se mettre à jour lorsque le prix d'un article change.

Answer 2

On dirait que votre stratégie n'est pas bonne dans l'ensemble.

1. Un « objet d'objets » comme vous l'entendez { {id:1}, {id:2} } est tout simplement pas javascript valide et génère une erreur. Choisissez une des choses tableau d'objets [ {id:1}, {id:2} ] ou un véritable objet { 1: {id:1}, 2: {id:2} }

2. @Blackhole est juste, vous n'avez pas besoin de regarder quoi que ce soit, interpolation fait partie du noyau angularjs et fait tout ce que montre délicate pour toi. Définir une variable cartItems et l'interpoler (avec les crochets {}) dans un modèle, en le filtrant ou non, maintiendra la valeur interpolée en phase avec la valeur de la variable sans rien faire de plus. C'est même lié dans les deux sens (si vous changez de modèle, la variable changera aussi). Vous pouvez vérifier la synchronisation en supprimant temporairement votre filtre: essayez de mettre {cartItems} dans votre modèle et mettez à jour votre panier, vous verrez le modèle mis à jour.

3. Ce format de modèle serait probablement plus approprié

   $scope.items = [ 
       { name: 'Cricket bat', cost: '2500' }, 
       { name: 'Football', cost: '1100' } 
   ]; 
   
   $scope.cartItems = [ 
       { item: { name: 'Cricket bat', cost: '2500' }, quantity: 3 }, 
   ];