javascript - 输入范围和计算

Question

我有一个问题，我有输入范围，所以我用于总价的折扣，当我更改输入范围时，我也想更改总计算，因为输入范围是初始总价的百分比。因此，在更改输入范围时，折扣也会发生最大变化，并且价格也会发生变化。

我的html:

<div class="slider2">
    <div class="range2">
        <input type="range" name="date3" id="date3" min="0" max="100" step="1" ng-model="ctrl2.inputAge2" value="Please enter the year of build" required>
        <P class="setyear2">15000 </P>
    </div>
</div>
<div>
    <p>INITIAL TOTAL</p>
    <P>{{totalPrice | number}} $</P>
</div>
<div>
    <p>discount</p>
    <P>{{ ctrl2.inputAge2 }} %</P>
</div>
<div>
    <p>TOTAL price</p>
    <P>{{getTotal1()  | number}} $</P>
</div>

和 JavaScript:

$scope.totalPrice = 170 ; 
var ctrl2 = this;
    ctrl2.inputAge2 = 10;

    $.fn.WBslider3 = function () {
      return this.each(function () {
        var $_this = $(this),
          $_date3 = $('input', $_this),
          $_title3 = $('.setyear3', $_this),
          thumbwidth = 50, // set this to the pixel width of the thumb
          yrnow3 = 100;

        // set range max to current year
        $_date3.attr('max', yrnow3);
        $('.endyear3', $_this).text(yrnow3);
        $_date3.val(yrnow3 - 10); // -10 years, just because...

        $_date3.on('input change keyup', function () {
          var $_this = $(this),
            val = parseInt($_date3.val(), 10);




          $_title3.text(val);

          var pos = (val - $_date3.attr('min')) / ($_date3.attr('max') - $_date3.attr('min'));

          // position the title with the thumb
          var thumbCorrect = thumbwidth * (pos - 0.5) * -1,
            titlepos = Math.round((pos * $_date3.width()) - thumbwidth / 4 + thumbCorrect);

          $_title3.css({
            'left': titlepos
          });

          // show "progress" on the track
          pos = Math.round(pos * 99); // to hide stuff behide the thumb
          var grad = 'linear-gradient(90deg, #A7A7A7 ' + pos + '%,#FFE014 ' + (pos + 1) + '%)';
          $_date3.css({
            'background': grad
          });

        }).on('focus', function () {
          if (isNaN($(this).val())) {
            $(this).val(0);
          }
        }).trigger('change');

        $(window).on('resize', function () {
          $_date3.trigger('change');
        });
      });
    };

    $(function () {

      $('.slider3').WBslider3();

    });



    $scope.getTotal1 = function () {
      var total1 = 0;
      total1 = ($scope.totalPrice + ctrl2.inputAge2);
      return total1;
    }

我怎样才能实现这一目标？

Answer 1

大部分可以在html中计算，也可以使用Number的toFixed方法:

<div class="slider2">
      <div class="range2">
          <input type="range" name="date3" id="date3" min="0" max="100" step="1" ng-model="discount"
              value="Please enter the year of build" required>
          <P class="setyear2">15000 </P>
      </div>
  </div>

<div>
 <b >INITIAL TOTAL</b>
  <P>{{totalPrice }} $</P>
</div>
<div>
    <b>discount</b>
  <P>{{ discount }} %</P>
</div>
<div>
 <b>TOTAL price</b>
  <P>{{(totalPrice - (totalPrice*discount)/100).toFixed(2)}} $</P>
</div>

工作中的笨蛋:http://plnkr.co/edit/E3uHDQpdE8e9HoDbiivs?p=preview