AngularJS 슬라이더 범위 값이 표시되지 않습니까?

Google 검색에서 AngularJS 슬라이더 막대를 구현하려고하는데 슬라이더 선택에 따라 필터를 베일 수 있지만 슬라이더 막대의 시작과 끝 부분에 최소 및 최대 범위 값을 표시 할 수 없습니다. 슬라이더 바의 위 또는 시작/끝 장소). 샘플처럼AngularJS 슬라이더 범위 값이 표시되지 않습니까?

내가 좋아하는 줄 경우 다음 내 슬라이더가

(이 슬라이더 막대 위에있는 범위 값이 표시되지 않습니다 물론) 미세 필터링되어, <slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound"></slider> 그러나 내가 다음과 같이 줄 경우 : <slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound" ng-model="itemrange.maxvalue"></slider> 내 필터링은 슬라이더 이동/선택을 기반으로 작동하지 않습니다.이 시간에도 범위 값을 표시해야합니다 (슬라이더 막대의 시작 및 끝 지점에 표시해야하지만, 실제로 발생하지 않습니까? 다음을 추가 : ng-model="itemrange.maxvalue")

Fiddle을 사용할 수 있습니다.

HTML :

<body ng-controller='PriceCtrl'> 
    <slider floor="0" ceiling="50" ng-model-low="lower_price_bound" ng-model-high="upper_price_bound" ng-model="itemrange.maxvalue"></slider> 
    lower_price_bound: <strong>{{lower_price_bound}}</strong> 
    &nbsp; 
    upper_price_bound: <strong>{{upper_price_bound}}</strong> 
    <hr> 
    <table border="1"> 
     <thead> 
     <th>Name</th> 
     <th>Min Price</th> 
     <th>Max Price</th> 
     </thead> 
     <tbody> 
     <tr ng-repeat='item in items|filter:priceRange'> 
      <td>{{item.name}}</td> 
      <td>{{item['min-acceptable-price']}}</td> 
      <td>{{item['max-acceptable-price']}}</td> 
     </tr> 
     </tbody> 
    </table> 

    </body>

app.js :

var app = angular.module('prices', ['uiSlider']); 

app.controller('PriceCtrl', function ($scope){ 

    $scope.itemrange = { 
    maxvalue: 50 
    }; 

    $scope.items = [{name: "item 1", "min-acceptable-price": "10", 
        "max-acceptable-price": "50"}, 
        {name: "item 2", "min-acceptable-price": "5", 
        "max-acceptable-price": "40"}, 
        {name: "item 3", "min-acceptable-price": "15", 
        "max-acceptable-price": "30"}]; 

    $scope.lower_price_bound = 0; 
    $scope.upper_price_bound = 50; 

    $scope.priceRange = function(item) { 
    return (parseInt(item['min-acceptable-price']) >= $scope.lower_price_bound && parseInt(item['max-acceptable-price']) <= $scope.upper_price_bound); 
    }; 
});

내가 어디 있는지 내가 잘못 뭐하는 거지주세요? 미리 감사드립니다.

출처

2016-07-04 Dhana

"ng-model"매개 변수를 사용하면 이전 두 모델 매개 변수를 무시합니다.

범위를 선택하려면 "ng-model-low"및 "ng-model-high"매개 변수 만 있으면됩니다. 당신이 슬라이더 위의 현재 선택 값을 표시하려면

, 그 후 어떻게 내가 할 수있는, 귀하의 회신를 들어, "빠르고 쉬운"솔루션의 use something like angularjs-slider.

출처

2016-07-04 10:42:05 MetaPyroxia

덕분에 일부 사용자 지정 CSS (possibly similar to this)

이 필요합니다 최소/최대 값을 내 슬라이더 위에 표시 하시겠습니까? 제발 알았어? – Dhana

그냥 내 답변에 그것을 편집했습니다. 사용자 정의 HTML과 CSS를 사용하여 슬라이더에 해당 값을 표시하도록 스타일을 지정해야합니다.이 스타일은 기본 스타일의 일부가 아닙니다. 예제는 Google 첫 번째 결과 링크 일 뿐이며 JQuery를 사용하지만 사용자가해야 할 일에 대한 일반적인 아이디어를 제공합니다. – MetaPyroxia

슬라이더 위에 선택한 값을 표시하고 싶지 않습니다. 슬라이더 상단에 낮은 값과 높은 값을 표시하면됩니다. http://plnkr.co/edit/jOk6GmUdzOu99xJqQ0wU?p=preview – Dhana

AngularJS 슬라이더 범위 값이 표시되지 않습니까?

답변

관련 문제