Angular 字母范围滑块

Question

我正在为学校开发 angular 网站。我正在尝试选择 classes 的滑块。（class 1 到 class 5）。classes 作为数组提供，因此当滑动完成时开始-class 和 end-class 应该显示。

Class数组：

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

},{ "code": "12", "decode": "class 12" } ];

当我从一个 class 拖到另一个 class 时，结果应该是这样的， class1-class10.

Answer 1

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

return 格式化滑块有效值； };

Answer 2

你所要做的就是改变上面plunker中的'$scope.validValues'。我分叉了上面的内容，它似乎显示了 class 个名字。检查 here

'translate' 函数是您的朋友 - 您可以在这里进行各种操作以显示您想要的内容。

$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"}
  ];

Angular 字母范围滑块

Angular slider for alphabet range

angularjs

angular-material