CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-serviceangularjs-controller
Millenial2020
Millenial2020

Reputation: 2913

Angular how to make a dynamic variable

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

Upvotes: 2

Views: 1802

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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

Upvotes: 4

murnax
murnax

Reputation: 1222

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;
  }
});

Upvotes: 0

Related Questions