存储在Angular中连续评估的对象表达式

时间:2016-02-04 01:10:23

标签: javascript angularjs angularjs-scope watch

大家好

我在构建原型电子商务网站时遇到了一个意想不到的问题。具体来说,我有一个方法设置为接受用户输入并根据以下内容应用折扣:

1)。代码是否正确(这由我的代码中的对象键表示)。

2)。用户当前总数是否满足某些最低标准(由$ scope.total比较表示)。

以下是我用来实现此目的的代码:

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

问题是我真的不喜欢在方法中定义这个庞大的对象。我最初尝试将它分配给$ scope上的变量,但是我发现这只会设置一次值,即每当用户将一个项目添加到他们的购物车并因此增加'总'价格时,这将不会反映出来在$ scope变量中。

由于$ scope.total在我的控制器加载时最初设置为0,因此它将始终保持此值。

有没有更好的方法来处理这个?任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:1)

我相信这是一个使用Filters的好例子。

<强>代码

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

<强>标记

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

Plunker

^ 已更新至您的问题

<强>标记

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

<强>代码

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

^ 修改

我现在注意到你的var代码,你可以像这样发送额外的参数

<强>标记

<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>

并像这样接收

<强> CODE

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