10

我正在尝试在我现有的 AngularJS 应用程序中使用anuglar-slider 。

我在这里关注了作者的评论

我从作者的 github 下载了以下文件（在 Head 标签中）并添加到我的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>

App.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相当陌生

如果您希望我也在这里发布作者的库文件代码，请告诉我。

4

2 回答 2

9

好的，我在准备这个时发现了一些麻烦，但现在它正在工作：

成立的烦恼：

  • 这是必需的 angularjs 版本1.1.4 or higher
  • 你需要有slider-template.html文件

  • 就像@Pascal说你需要包括uiSlider：

    var app = angular.module('myApp', ['uiSlider'])
  • 我在下面为您准备了一个工作演示。我希望它会帮助你

演示

于 2013-06-14T17:14:19.633 回答
0

最近我在 angularJS 中使用了 RANGE SLIDER。如果你想使用花哨的滑块或滑块指令。你会从下面得到它。

没有外部依赖的 AngularJS 滑块指令有许多类型的滑块，例如

  • 简单的滑块
  • 范围滑块
  • 具有自定义样式的滑块
  • 具有动态选择栏颜色的滑块
  • 带有定制地板/天花板/台阶的滑块
  • 带刻度的滑块

它非常易于使用、移动友好且可定制。

我使用 jQuery 使用了简单的滑块。代码如下。

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

在脚本标签中添加以下代码

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

上面的脚本对我有用，也应该对你有用。

于 2017-11-15T10:49:30.190 回答