Saving dynamic object expressions that are constantly re-evaluated within Angular

Question

Saving dynamic object expressions that are constantly re-evaluated within Angular

Hello Everyone

During the development of a prototype e-commerce website, I encountered an unexpected issue today. Specifically, the challenge lies in a method designed to take user input and apply discounts based on two criteria:

1). Validation of a correct code (represented by object keys).

2). Meeting specific total conditions for the user's order (based on $scope.total comparisons).

Below is the current code implementation:

$scope.processDiscount = function(code) {
 var discountInfo = {
   'FIVE': {
     condition: true,
     discount: 5
   },
   'TEN': {
     condition: $scope.total > 50,
     discount: 10
   },
   'FIFTEEN': {
     condition: $scope.total > 75 && $scope.reviewCartCategories('Men\'s Footwear', 'Women\'s Footwear'),
     discount: 15
   }
 };
 for (var key in discountInfo) {
   if (code === key && discountInfo[key].condition) {
     $scope.applyDiscount(discountInfo, key);
   };
 };
};

The main concern is the large object defined within the method. Initially, I tried assigning it to a variable on the $scope, but faced the issue of it being set once and not updating with changes in the user's cart. This is because $scope.total is initially set to 0 when the controller loads, making it static.

I am seeking advice on a more efficient way to handle this situation. Any suggestions or assistance would be greatly appreciated!

javascript angularjs angularjs-scope watch

Answer 1

Answer №1

I believe this is a great example to showcase the use of Filters.

Sample Code

angular.module('App', [])
  .filter('discount', function() {
    return function(input) {
      return input * 0.5;
    };
  })
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.total = 0;
  }]);

HTML Markup

<body ng-app="App" ng-controller="MyCtrl">
    <input type="number" ng-model="total"/>
    {{ total | discount }}
</body>

Plunker

^ Check out the Updated Question

More Markup

<body ng-app="App" ng-controller="MyCtrl">
    <input type="number" ng-model="total"/>
    discount = {{ total | discount }}
    total with discount = {{ total - (total |discount) }}
</body>

Updated Code

angular.module('App', [])
  .filter('discount', function() {
    return function(input) {
      switch(true){
        case (input > 50):
          return input * 0.1;
          break;
        case (input > 75):
          return input * 0.15;
          break;
        default:
          return input * 0.05;
          break;
      }
      return 0;
    };
  })
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.total = 0;
  }]);

Plunker

^ Edit

Just noticed that you can pass an additional parameter like this

More HTML Markup

<body ng-app="App" ng-controller="MyCtrl">
    <input type="number" ng-model="total"/>
    discount = {{ total | discount:'FIVE'}}
    total with discount = {{ total - (total|discount:'FIVE') }}
</body>

You can then receive and utilize these parameters in your code as shown below

CODE Example

angular.module('App', [])
  .filter('discount', function() {
    return function(input, code) {
      switch(true){
        case (code == 'FIVE'):
          return input * 0.05;
          break;
        case (input > 50 && code == 'TEN'):
          return input * 0.1;
          break;
        case (input > 75 && code == 'FIFTEEN'):
          return input * 0.15;
          break;
        default:
          return 0;
          break;
      }
      return 0;
    };
  })
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.total = 0;
  }]);

Answer 2

I believe this is a great example to showcase the use of Filters.

Sample Code

angular.module('App', [])
  .filter('discount', function() {
    return function(input) {
      return input * 0.5;
    };
  })
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.total = 0;
  }]);

HTML Markup

<body ng-app="App" ng-controller="MyCtrl">
    <input type="number" ng-model="total"/>
    {{ total | discount }}
</body>

Plunker

^ Check out the Updated Question

More Markup

<body ng-app="App" ng-controller="MyCtrl">
    <input type="number" ng-model="total"/>
    discount = {{ total | discount }}
    total with discount = {{ total - (total |discount) }}
</body>

Updated Code

angular.module('App', [])
  .filter('discount', function() {
    return function(input) {
      switch(true){
        case (input > 50):
          return input * 0.1;
          break;
        case (input > 75):
          return input * 0.15;
          break;
        default:
          return input * 0.05;
          break;
      }
      return 0;
    };
  })
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.total = 0;
  }]);

Plunker

^ Edit

Just noticed that you can pass an additional parameter like this

More HTML Markup

<body ng-app="App" ng-controller="MyCtrl">
    <input type="number" ng-model="total"/>
    discount = {{ total | discount:'FIVE'}}
    total with discount = {{ total - (total|discount:'FIVE') }}
</body>

You can then receive and utilize these parameters in your code as shown below

CODE Example

angular.module('App', [])
  .filter('discount', function() {
    return function(input, code) {
      switch(true){
        case (code == 'FIVE'):
          return input * 0.05;
          break;
        case (input > 50 && code == 'TEN'):
          return input * 0.1;
          break;
        case (input > 75 && code == 'FIFTEEN'):
          return input * 0.15;
          break;
        default:
          return 0;
          break;
      }
      return 0;
    };
  })
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.total = 0;
  }]);

Saving dynamic object expressions that are constantly re-evaluated within Angular

Answer №1

Similar questions

The function service.foo is not recognized in Angular

Is there a way to incorporate a JavaScript variable as the value for CSS width?

show logged-in users on the screen

Function exported as default in Typescript

Subscription date is activated when a different part of the state changes in ngrx

Retrieving the image source from the image element by utilizing $(this).find("");

I am struggling to retrieve information from HTML elements using the GET method in Node.js and MongoDB

Displaying data on the user interface in Angular by populating it with information from the form inputs

Building a React component to display JSON data in a tabular format

Troubleshooting: Issues with AngularJS Data Binding in HTML Tables

Customizing CoreUI column names in Vue

Tips on updating the $authProvider.loginUrl for Satellizer from an Angular controller

Display the active item in ng-repeat using conditional ui-view

React - Component not updating after Axios call in separate file

Static variable storing instances of objects

JSHow to dynamically access child elements in objects

Encountering a response code of 401 results in the exclusion of certain code

The checkbox labeled "Shipping Same as Billing" is not functioning correctly. I have included my JavaScript code below, can someone please help me identify what I am overlooking? (Only JavaScript code is provided; HTML is

Delete the final character from the value stored in the map

Guide to automatically logging into an AngularJS application using a specific URL