Question

我是AngularJS的新手，所以非常感谢我能得到的任何帮助！

所以我有一个2-6的滑块。数字表示小时数。

我想做的是点击指令来计算时间*成本，而不是点击指令，我希望与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>

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

});

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

AngularJS：每当滑块按钮改变时如何调用函数？

0 个答案: