Question

<div range-slider min="minPrice" max="maxPrice" modelmin="userMinPrice" model-max="userMaxPrice" step="5" ng-model="selectedPrice" ng-change="price()"></div>

当角度范围滑块值更改并调用function.ngchange无效时，如何触发事件。

Answer 1

在这里，请查看以下代码：

angular.module('myApp', ['ui-rangeSlider'])
  .controller('MyController', function($scope) {

    $scope.rangeSlider = {
      minPrice: 10,
      maxPrice: 100
    }

    $scope.userMinPrice = 50;
    $scope.userMaxPrice = 80;

    $scope.$watch('userMinPrice', function(newVal, oldVal) {
      if (newVal !== oldVal) {
        $scope.message = 'userMinPrice has changed from ' + oldVal + ' to ' + newVal;
        // To whatever you want here.
      }
    });
    $scope.$watch('userMaxPrice', function(newVal, oldVal) {
      if (newVal !== oldVal) {
        $scope.message = 'userMaxPrice has changed from ' + oldVal + ' to ' + newVal;;
        // To whatever you want here.
      }
    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://danielcrisp.github.io/angular-rangeslider/angular.rangeSlider.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="http://danielcrisp.github.io/angular-rangeslider/angular.rangeSlider.js"></script>

<div ng-app="myApp" ng-controller="MyController">

  <div range-slider min="rangeSlider.minPrice" max="rangeSlider.maxPrice" model-min="userMinPrice" model-max="userMaxPrice" step="5">
  </div>

  <div> {{ message }} </div>

</div>

Answer 2

这会对你有所帮助

<div 
     range-slider min="0" 
     max="100" 
     model-max="demo7.valueB"  
     pin-handle="min" 
     on-handle-up="choosePrice(demo7.valueB)">

     </div>

在控制器部分（js文件）

$ scope.demo7 = { valueA：0，价值B：25 };

            $scope.choosePrice=function(val)
            {
                console.log(val);
            }

Answer 3

我得到了解决方案。使用on-handle-up

<div range-slider min="minPrice" max="maxPrice" model-min="userMinPrice" model-max="userMaxPrice" step="5" ng-model="selectedPrice" filter="currency" on-handle-up="choosePrice()"></div>

如何在角度范围滑块中添加事件。我使用ngchange但它不起作用

3 个答案: