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 (Angular コード) 。著者の指示に従って 2 行目を追加しました。そこで何か間違ったことをしたのではないかと思います。

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>

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

上記のスクリプトは私にとってはうまくいきますが、あなたにもうまくいくはずです。

于 2017-11-15T10:49:30.190 に答える