Angular how to make a dynamic variable

Question

I have a view that I want the view the to get newly updated price everytime I click the change price button. I used a service that stores the newPrice that gets his value from the priceModel. so far I can't get the price to updated in the DOM when i press the button.

this is my html

    <body ng-app="my-app">
  <div ng-controller="my-controller">
    <h1>Products</h1>
    <input type="text" ng-model="priceModel" />
    <br/>
    <button type="button" ng-click="changePrice()">Change Price</button>
  </div>
  <div ng-controller='priceController'>
    Price {{price}}
  </div>

</body>

this is my javascript

    var app = angular.module('my-app', [])

.controller("my-controller", function($scope, Products) {

  var newPrice = '';

  $scope.changePrice = function(){
    newPrice = $scope.priceModel;
    Products.price(newPrice);
  }

})

.controller('priceController', function(Products, $scope){
  $scope.price = Products.price();
})

.service('Products', function(){

  this.price = function(newPrice){
    return newPrice;
  };

})

MY CODEPEN

so why do not you assign newPrice to any variable within Product Service? You simply need to define a setter and getter methods that work with a local variable. — Blauharley
– Blauharley, Commented Aug 10, 2015 at 18:14

Pankaj Parkar · Accepted Answer · 2015-08-10 18:21:05Z

You could maintain a object inside the service so that you could follow the dot rule(JavaScript inheritance) to update the object values.

Create and price object inside a service and there would be an setter method that would set the new value of an price.value & that could be sharable among different controller.

In order to make it working inside a priceController you need to set whole price object to $scope.price like by doing $scope.price = Products.price; that will take care of updation of price.value. HTML will have and {{price.value}}

Markup

<body ng-app="my-app">
  <div ng-controller="my-controller">
    <h1>Products</h1>
    <input type="text" ng-model="price" />
    <br/>
    <button type="button" ng-click="changePrice(price)">Change Price</button>
  </div>
  <div ng-controller='priceController'>
    Price {{price.value}}
  </div>
</body>

Code

var app = angular.module('my-app', [])

.controller("my-controller", function($scope, Products) {

  $scope.price = Products.price.value;
  $scope.changePrice = function(newPrice){
    Products.setPrice(newPrice);
  };
})
.controller('priceController', function(Products, $scope){
  $scope.price = Products.price;
})
.service('Products', function(){
  var Products = this;
  Products.price = {
    value: ''
  };
  this.setPrice = function(newPrice){
    Products.price.value = newPrice;
  };  
})

Working Codepen

murnax · Accepted Answer · 2015-08-10 18:18:44Z

In service, you have to return object out of the function like this

app.module('my-app').service('Products', function(){
  var price = 0;
  return {
    setPrice: function(price){
      price = price;
    },
    getPrice: function(){
      return price;
    }
  }
});

Then in your $scope.changePrice function in your controller

$scope.changePrice = function(){
  Product.setPrice($scope.priceModel);
}

When user press the button, this function will be called and pass "priceModel" to function "setPrice" in Product service

And to watch for changing on "price" value on service, you can use $watch like this

$scope.$watch(function(){ return Product.getPrice() }, function(newVal, oldVal){
  if(newVal){
    $scope.price = newVal;
  }
});

Collectives™ on Stack Overflow

Angular how to make a dynamic variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related