Javascript AngularJS：如何在滑块按钮更改时调用函数？_Javascript_Jquery_Html_Angularjs

Javascript AngularJS：如何在滑块按钮更改时调用函数？

javascript jquery html angularjs

Javascript AngularJS：如何在滑块按钮更改时调用函数？,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我对AngularJS很陌生，所以非常感谢您对我的帮助我有一个从2到6的滑块。数字表示小时数我想做的不是让click指令计算每次单击的时间*成本，而是让html和js进行双向数据绑定。因此，当我将滑块移动一个槽口时，它将重新计算价格并以html显示到目前为止，我得到的是： <body ng-controller="pricingCtrl"> <div style="width: 100%; margin-bottom: 10px;" id="slider">

我对AngularJS很陌生，所以非常感谢您对我的帮助

我有一个从2到6的滑块。数字表示小时数

我想做的不是让click指令计算每次单击的时间*成本，而是让html和js进行双向数据绑定。因此，当我将滑块移动一个槽口时，它将重新计算价格并以html显示

到目前为止，我得到的是：

<body ng-controller="pricingCtrl">
    <div style="width: 100%; margin-bottom: 10px;" id="slider"></div>
    <div class="minumum-statement">*minimum 2 hours</div>
    <div class="hour-slider">
        <div class="slider-label">
            <div class="slider-hour2">2</div>
            <div class="slider-hour3">3</div>
            <div class="slider-hour4">4</div>
            <div class="slider-hour5">5</div>
            <div class="slider-hour6">6</div>
        </div>
    </div>
    <div class="calculate-button-container">
            <div ng-click="calculatePrice()" class="calculate-button"> Calculate </div>
    </div>

<div class="final-price-container">
        <div>
             <div  class="final-price">$ {{price}}</div>
        </div>
</div>

我在考虑使用ng watch来查看js文件中sliderValue的值。如果价格发生变化，则重新计算价格，然后使用表达式将价格显示回html

搜索“noUiSlider事件”的快速搜索结果返回。尝试添加

slider.noUiSlider.on（'slide'，$scope.calculatePrice）发送到控制器。
var app = angular.module('pricingApp', []);

app.controller('pricingCtrl', function ($scope) {
    var slider = document.getElementById('slider');

    noUiSlider.create(slider, {
        start: [16],
        range: {
            'min': [  0 ],
            'max': [ 100 ]
        },
        step: 16
    });

    $scope.inputData = {};
    $scope.inputData.numAdults = '1';
    $scope.inputData.numChildren = '1';
    $scope.price = 60;

    $scope.calculatePrice = function () {
        var sliderValue = slider.noUiSlider.get();
        var numHours = (sliderValue / 16) + 1;
        if (numHours > 6) {
            numHours = 'All Day';
        }
        if (Number($scope.inputData.numAdults) + Number($scope.inputData.numChildren) === 1) {
            $scope.price = 25 * numHours;
        }
        else {
            $scope.price = (15 * (Number($scope.inputData.numAdults) + Number($scope.inputData.numChildren))) * numHours;
        }
        $scope.priceData = {
            numAdults: $scope.inputData.numAdults,
            numChildren: $scope.inputData.numChildren,
            price: $scope.price,
            totalNumPeople: Number($scope.inputData.numChildren) + Number($scope.inputData.numAdults),
            numHours: numHours
        };
    }

});