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

如何在角度範圍滑塊值更改並調用function.ngchange時觸發事件不起作用。如何在角度範圍滑塊中添加事件。我使用ngchange但它不起作用

+0

使用如果您正在使用這一個https://github.com/danielcrisp/angular-rangeslider,看着我不認爲「範圍滑塊」的文檔支持NG-'模型「或」ng-change「 – Gaurav

+0

那麼什麼是解決方案 –

+0

你可以添加手錶,如果你想我可以提供一個演示代碼。 – Gaurav

回答

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>

0

我得到的解決方案。按手柄上的向上

<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> 
+0

是的,這也可以達到目的。 – Gaurav