Cách triển khai thanh trượt phạm vi jQuery trong AngularJS

Tôi đang cố gắng sử dụng anuglar-slider trong ứng dụng AngularJS hiện có của mình.Cách triển khai thanh trượt phạm vi jQuery trong AngularJS

Tôi đi theo ý kiến của tác giả here

Tôi đã tải về dưới đây file (trong Head thẻ) từ github của tác giả và được thêm vào trong tôi index.html

HTML code:

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

App. js (Mã góc). Tôi thêm vào dòng thứ hai theo hướng dẫn của tác giả, tôi nghi ngờ tôi đã làm điều gì đó sai có

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

Tôi không thấy bất kỳ rendering trượt trong trình duyệt. Tuy nhiên, chức năng cụ thể Angular cũ hơn trong ứng dụng vẫn hoạt động và không có lỗi trong giao diện điều khiển của trình duyệt.

Nếu bạn không thể tìm thấy sự cố ở trên, vui lòng đề xuất bất kỳ cách nào khác để triển khai thanh trượt phạm vi trong ứng dụng AngularJS.

Tôi khá mới để AngularJS

Hãy cho tôi biết nếu bạn muốn tôi gửi mã tập tin thư viện của tác giả ở đây là tốt.

Nguồn

2013-06-14 Watt

Bất kỳ lỗi nào trên trang? – WooCaSh

Câu hỏi ngu ngốc nhưng cần hỏi. Bạn có bao gồm thư viện 'góc cạnh 'không? – WooCaSh

Vâng, tôi đã làm. Đó là lý do tại sao tất cả các công cụ khác vẫn hoạt động. Để làm cho câu hỏi có thể đọc được, tôi vừa mới đăng tải 'index.html' – Watt

Ok Tôi tìm thấy một số khó khăn khi chuẩn bị này, nhưng bây giờ nó làm việc:

rắc rối Năm thành lập:

nó đòi hỏi phiên bản angularjs 1.1.4 or higher
bạn cần có slider-template.html tập tin
và thích @ Pascal cho biết bạn cần phải bao gồm uiSlider:
```
var app = angular.module('myApp', ['uiSlider']) 
```
Tôi đã chuẩn bị cho bạn bản trình diễn hoạt động bên dưới. Tôi hy vọng nó sẽ giúp bạn

DEMO

Nguồn

2013-06-14 17:14:19 WooCaSh

+1. Cảm ơn bạn đã viết mã. Tôi sẽ kiểm tra để xem những gì tôi đã bỏ lỡ. – Watt

Nó hiển thị trên màn hình ngay bây giờ. Nó không trượt khi tôi đặt 'floor =" 0.0 "ceiling =" 1.0 "'. Tôi đang nhìn vào nó. Sẽ rất hữu ích nếu bạn có thể bình luận về điều đó. – Watt

@Bạn muốn phạm vi từ 0 đến 1 phải không? – WooCaSh

Gần đây tôi đã sử dụng PHẠM VI thanh trượt trong angularJS. Nếu bạn muốn sử dụng thanh trượt lạ mắt hoặc chỉ thị thanh trượt. Bạn sẽ nhận được nó từ bên dưới.

AngularJS slider directive with no external dependencies Có rất nhiều loại của thanh trượt như

Simple trượt
Phạm vi thanh trượt
Slider với tùy chỉnh phong cách
Slider với lựa chọn động thanh màu
Slider với sàn tùy chỉnh/ceil/step
Thanh trượt với ticks

Rất dễ sử dụng, thân thiện với thiết bị di động và có thể tùy chỉnh.

Tôi đã sử dụng thanh trượt đơn giản bằng jQuery. Mã được đưa ra dưới đây.

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

Thêm mã sau trong thẻ script

<!-- 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 -->

Trên kịch bản làm việc tốt cho tôi, nên làm việc cho bạn quá.

Nguồn

2017-11-15 10:49:30

Cách triển khai thanh trượt phạm vi jQuery trong AngularJS

Trả lời

Các vấn đề liên quan