アルファベット範囲の角度スライダー

Question

私は学校のための角度のあるウェブサイトを開発しています。私はクラスを選択するためのスライダーを試しています（クラス1からクラス5）。クラスは配列として提供されているので、開始クラスと終了クラスを表示する必要があります。

クラスArray：

$scope.classArry = [{ 
    "code": "LKG", 
    "decode": "LKG" 
}, { 
    "code": "UKG", 
    "decode": "UKG" 
}, { 
    "code": "1", 
    "decode": "class 1" 
}, { 
    "code": "2", 
    "decode": "class 2" 
}, { 
    "code": "3", 
    "decode": "class 3" 
}, { 
    "code": "4", 
    "decode": "class 4" 
}, { 
    "code": "5", 
    "decode": "class 5" 
}, { 
    "code": "6", 
    "decode": "class 6" 
}, { 
    "code": "7", 
    "decode": "class 7" 
}, { 
    "code": "8", 
    "decode": "class 8" 
}, { 
    "code": "9", 
    "decode": "class 9" 
}, { 
    "code": "10", 
    "decode": "class 10" 
}, { 
    "code": "11", 
    "decode": "class 11" 

}、{ "コード"： "12"、 "デコード"： "クラス12" }]。

私は他のクラスへのクラスからドラッグすると結果は、ようにする必要があり クラス1クラス10

Answer 1

あなたがしなければならないことは、上記のプランナーの '$ scope.validValues'を変更することだけです。私は上記をフォークし、クラス名を表示しているようです。チェックhere

'翻訳'機能はあなたの友人です - ここでは、あなたが望むようにあらゆる種類の操作を行うことができます。

$scope.validValues = [{ 
    "code": "LKG", 
    "decode": "LKG" 
}, { 
    "code": "UKG", 
    "decode": "UKG" 
}, { 
    "code": "1", 
    "decode": "class 1" 
}, { 
    "code": "2", 
    "decode": "class 2" 
}, { 
    "code": "3", 
    "decode": "class 3" 
}, { 
    "code": "4", 
    "decode": "class 4" 
}, { 
    "code": "5", 
    "decode": "class 5" 
}, { 
    "code": "6", 
    "decode": "class 6" 
}, { 
    "code": "7", 
    "decode": "class 7" 
}, { 
    "code": "8", 
    "decode": "class 8" 
}, { 
    "code": "9", 
    "decode": "class 9" 
}, { 
    "code": "10", 
    "decode": "class 10" 
}, { 
    "code": "11", 
    "decode": "class 11"} 
    ]; 

Answer 2

plunker link私はこれに似た何かを行っています。これがあなたを助けるかもしれないことを望む

var formattedSliderValidValues = 


{ 
    floor: codeArray[0], 
    ceil: codeArray[codeArray.length-1],   
    value: 0, 
    maxVal:11, 
    translate : translate, 
    incrSpeed : incrFun, 
    decrSpeed : decrFun, 
    codeArray : codeArray, 
    stepArray : codeArray, 
    valueArray : valueArray, 
    selection : true, 
    displayScale : true, 
    typedValue: codeArray[0], 
    hidePointerLabels: true 
    }; 

戻り値formattedSliderValidValues; };