引导滑块：获取选定值期间的问题

【问题标题】：Bootstrap Slider : Issue during fetching selected value引导滑块：获取选定值期间的问题
【发布时间】：2020-09-07 14:24:56
【问题描述】：

我的代码：

<input id="ex19" type="text"
                 data-provide="slider"
                 data-slider-ticks="[1, 2, 3, 4]"
                 data-slider-ticks-labels='["Chart 1", "Chart 2", "chart 3", "chart 4" ]'
                 data-slider-ticks-values='["chart1", "chart2" , "chart3", "chart4"]'
                 data-slider-min="1"
                 data-slider-max="4"
                 data-slider-step="1"
                 data-slider-value="1"
                 data-slider-tooltip="hide" />

我正在使用 angularJS 来获取选定滑块刻度的值。
这是我的代码：

angular.element($(this)).attr("data-value");

请告诉我这有什么问题？

【问题讨论】：

angular.element($(this)).data("slider-value"); ??
它不工作。显示相同的结果“未定义”....

标签： jquery angularjs angular-ui-bootstrap

【解决方案1】：

使用AngularJS，最简单的方法是使用ng-model（ng-change仅用于展示目的）：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script>
angular.module("inputExample", [])
  .controller("InputCtrl", ['$scope', function($scope) {
    $scope.inputChange = function() {
      alert($scope.yourInput);
  }
}])
</script>
<body ng-app="inputExample" ng-controller="InputCtrl">
  <input id="ex19" 
    ng-model="yourInput" 
    ng-change="inputChange()"
    type="text"
    data-provide="slider"
    data-slider-ticks="[1, 2, 3, 4]"
    data-slider-ticks-labels='["Chart 1", "Chart 2", "chart 3", "chart 4" ]'
    data-slider-ticks-values='["chart1", "chart2" , "chart3", "chart4"]'
    data-slider-min="1"
    data-slider-max="4"
    data-slider-step="1"
    data-slider-value="1"
    data-slider-tooltip="hide" />
    
  {{yourInput}}

</body>

【讨论】：