2013-06-14 2 views
10

기존 AngularJS 앱에서 anuglar-slider을 사용하려고합니다. AngularJS에서 jQuery 범위 슬라이더를 구현하는 방법

나는 저자의 GitHub의에서 (헤드 태그) 내가 파일 아래에 다운로드 한 저자의 의견 here

을 따라 내 index.html

HTML 코드에 추가 :

<head> 

<link rel="stylesheet" href="css/angular-slider.css"> 
<script src="js/vendor/angular-slider.js"></script> 

</head> 
<body> 

    <slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider> 

</body> 

앱. js (각도 코드). 나는 저자의 지시에 따라 두 번째 줄을 추가, 난 내가 브라우저에서 모든 슬라이더 렌더링을 볼 수 없습니다

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

app.constant('Config', 
{ 
    baseURL : "http://blah", 
    httpTimeout : 36000 
}); 
app.config(function($logProvider) { 
    $logProvider.debugEnabled(true); 
}); 
//and some other app specific code follows 

가 뭘 잘못했다 생각한다. 그러나 앱의 이전 Angular 특정 기능이 여전히 작동하며 브라우저의 콘솔에 오류가 없습니다.

위의 문제를 찾을 수없는 경우 범위 슬라이더을 AngularJS 앱에 구현하는 다른 방법을 제안하십시오.

는 당신이뿐만 아니라 여기에 저자의 라이브러리 파일의 코드를 게시하는 나 같은 경우 알려줘 AngularJS와

에 상당히 새로운입니다.

설립 된 문제 :

+0

페이지에 오류가 있습니까? – WooCaSh

+0

어리석은 질문이지만 질문이 필요합니다. 'angular' 라이브러리도 포함 시켰습니까? – WooCaSh

+0

예, 했어요. 이것이 다른 모든 것들이 여전히 작동하는 이유입니다. 질문을 읽을 수있게하기 위해, 나는 방금 내'index.html' – Watt

답변

9

확인 좀이 준비하지만 지금은 일하고있어 문제 발견

  • 이 필요한 것 AngularJS와 버전 당신이 slider-template.html 파일
  • 을 필요로하고 좋아 1.1.4 or higher

  • 를 @ 파스칼은 사용자가 uiSlider을 포함해야한다고 말했습니다.

    var app = angular.module('myApp', ['uiSlider']) 
    
  • 아래 작업 데모를 준비했습니다. 나는 당신이

DEMO

+0

+1. 코드를 보내 주셔서 감사합니다. 나는 내가 놓친 것을보기 위해 시험 할 것이다. – Watt

+0

화면에 표시됩니다. 'floor = "0.0"ceiling = "1.0"'을 설정하면 슬라이드가되지 않습니다. 나는 그것을 조사하고있다. 당신이 그것에 대해 논평 할 수 있다면 큰 도움이 될 것입니다. – Watt

+0

@Watt 원하는 범위는 0에서 1까지입니다. – WooCaSh

0

최근에 내가 AngularJS와의 범위 슬라이더를 사용하고 도움이되기를 바랍니다. 멋진 슬라이더 또는 슬라이더 지시문을 사용하려는 경우. 당신은 아래에서 그것을 얻을 것이다.

AngularJS slider directive with no external dependencies

  • 간단한 슬라이더처럼 슬라이더의 많은 종류가 있습니다
  • 범위 슬라이더 사용자 정의 스타일 동적 선택 바 색상 사용자 정의 바닥
  • 슬라이더와
  • 슬라이더와
  • 슬라이더/ceil/step
  • 슬라이더 포함 틱

모바일 사용이 편리하고 맞춤 설정이 가능합니다.

jQuery를 사용하여 간단한 슬라이더를 사용했습니다. 코드는 아래와 같습니다. 나를 위해 좋은 작업 스크립트 태그 스크립트 위

<!-- RANGE SLIDER JS START --> 
<script> 
var slider = document.getElementById("myRange"); 
var output = document.getElementById("demo"); 
output.innerHTML = slider.value; 

slider.oninput = function() { 
    output.innerHTML = this.value; 
} 
</script> 
<!-- RANGE SLIDER JS OVER --> 

에서

<form> 
    <div class="choose_industry"> 
     <div class="form-group"> 
      <label class="control-label col-xs-12 col-sm-4 col-md-2 col-lg-2 " for="name">What Industry?</label> 
      <div class="col-xs-12 col-sm-8 col-md-10 col-lg-10"> 
       <div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
        <input type="radio" name="radio1" id="radio1" value="cdl" ng-model="leg_ser.industry"> 
        <label for="radio1"> 
         Commercial Trucking Transportation 
        </label> 
       </div> 
       <div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6"> 
        <input type="radio" name="radio1" id="radio2" value="non_cdl" ng-model="leg_ser.industry"> 
        <label for="radio2"> 
         Other Industries 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="employee_counting"> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Number of Employees?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-user"></i></span> 
       <input type="number" class="form-control" placeholder="Employees" name="Number of Employees" ng-model="leg_ser.num_of_emp"> 
       <!-- <span>Total Number of Employees</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">0</span> 
       <span class="pull-right">25k</span> 
       <div id="slidecontainer"> 
        <input type="range" min="0" max="25000" value="0" class="slider" id="myRange" ng-model="leg_ser.num_of_emp"> 
       </div> 
      </div> 
     </div> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Enrollment Percentage (%)?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-percent"></i></span> 
       <input type="number" class="form-control" placeholder="Percentage" name="Enrollment Percentage" ng-model="leg_ser.enroll_per"> 
       <!-- <span>Estimated Percentage that will enroll</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">0%</span> 
       <span class="pull-right">100%</span> 
       <div id="slidecontainer"> 
        <input type="range" min="1" max="100" value="1" class="slider" id="myRange" ng-model="leg_ser.enroll_per"> 
       </div> 
      </div> 
     </div> 
     <div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
      <label class="control-label" for="name">Annual Cost per Employees?</label> 
      <div class="input-group"> 
       <span class="input-group-addon"><i class="fa fa-dollar"></i></span> 
       <input type="number" class="form-control" placeholder="Cost" name="Annual Cost per Employees" ng-model="leg_ser.annual_cost"> 
       <!-- <span>Avarage Salary and benifits per Employee</span> --> 
      </div> 

      <div class="range_slider"> 
       <span class="pull-left">$0</span> 
       <span class="pull-right">$300k</span> 
       <div id="slidecontainer"> 
        <input type="range" min="0" max="300000" value="0" class="slider" id="myRange" ng-model="leg_ser.annual_cost"> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

추가 다음 코드는, 너무 당신을 위해 작동합니다.

관련 문제