Можете ли вы помочь мне выполнить расчет на AngularJS во время привязки данных? Здесь есть еще одна проблема, так как размер скидки не является числовым. Это строка с добавленным "%".

Мой текущий результат:

Actual: 1000
Discount: 10%
Price after discount : 10%     [I want the calculation here. 1000-(.1*1000) ie 900]

Actual: 600
Discount: 5%
Price after discount : 5%   [I want the calculation here]

< Сильный > < EM> index.html

<body ng-app="myApp">
  <div ng-controller="ItemCtrl">
    <span ng-repeat="item in items">
    <div>Actual: {{item.actual}}</div> 
      <div>Discount: {{item.discount}}</div> 
       <div>Price after discount : {{item.discount}}</div> 
       <hr>  
        </span>
  </div>

< Сильный > < EM> app.js

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

myApp.controller('ItemCtrl', ['$scope', function($scope) {
  $scope.items = [{
    "discount": "10%",
    "actual": "1000"
  }, {
    "discount": "5%",
    "actual": "600"
  }];
}]);

Вот моя ссылка на jsfiddle: http://jsfiddle.net/960bhxab/1/

0
spiderman 27 Ноя 2016 в 03:08

4 ответа

Лучший ответ

Лучше держать логику подальше от дома.

http://jsfiddle.net/errvald/960bhxab/4/

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

myApp.controller('ItemCtrl', ['$scope', function($scope) {
  $scope.items = [{
    "discount": "10%",
    "actual": "1000"
  }, {
    "discount": "5%",
    "actual": "600"
  }];
  
  $scope.items.forEach(function(item){
    item['price'] = item.actual - (item.actual*item.discount.slice(0, -1))/100;
  });
  
}]);
.rating {
  color: #a9a9a9;
  margin: 0;
  padding: 0;
}

ul.rating {
  display: inline-block;
}

.rating li {
  list-style-type: none;
  display: inline-block;
  padding: 1px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
}

.rating .filled {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="ItemCtrl">
    <span ng-repeat="item in items">
    <div>Actual: {{item.actual}}</div> 
      <div>Discount: {{item.discount}}</div> 
       <div>Price after discount : {{item.price}}</div> 
       <hr>  
        </span>
  </div>
</body>
1
Stubbies 27 Ноя 2016 в 00:27

Если вы можете удалить знак% из своих данных, это немного упростит вычисления?

<div>Price after discount : {{item.actual - item.actual/100*item.discount}}</div>
1
MattJHoughton 27 Ноя 2016 в 00:17

Все очень просто. Уберите% из переменной, чтобы он отображался только на дисплее, тогда расчет будет простым:

   <div>Discount: {{item.discount}}%</div> 
   <div>Price after discount : {{item.actual*(100-item.discount)/100}}

http://jsfiddle.net/ao17ft09/

1
Mikkel 27 Ноя 2016 в 00:17

Я нашел себя

Вот JSFiddle. Пожалуйста, дайте мне знать, если есть лучший подход.

http://jsfiddle.net/960bhxab/2/

< Сильный > < EM> index.html

<body ng-app="myApp">
  <div ng-controller="ItemCtrl">
    <span ng-repeat="item in items">
    <div>Actual: {{item.actual}}</div> 
      <div>Discount: {{item.discount}}</div> 
       <div>Price after discount : {{item.actual-(item.actual*item.discount.replace('%', '')/100)}}</div> 
       <hr>  
        </span>
  </div>
</body>
0
spiderman 27 Ноя 2016 в 00:14