Question

我是AngularJs的新手，我遇到了一个问题。我想根据无线电类型值更改滑块的最大值。

这是我的HTML

<input type="radio" ng-model="maxValue" value="100">100
<input type="radio" ng-model="maxValue" value="200">200
<input type="radio" ng-model="maxValue" value="300">300
<br>{{maxValue}}
<br>

<div class="bg-master m-b-10"  id="slider-tooltips" nouislider="" /></div>

以下是我的指示

angular.module('app')
    .directive('nouislider', function($rootScope) {
        return {
            restrict: 'A',
            link: function($scope, element, attrs) {
                var newVal = $rootScope.maxValue;

                $(element).noUiSlider({
                    start: 0,
                    step : 1,
                    connect: "lower",
                    range: {
                        'min': 0,
                        'max': newVal
                    }
                    });
                    $(element).Link('lower').to('-inline-<div class="tooltip fade top in" style="top: -33px;left: -14px;opacity: 0.7;" />', 
                        function(value) {
                            $(this).html(
                                '<div class="tooltip-inner">' +
                                '<span>' + value + '</span>' +
                                '</div>'
                            );
                        });
                    $( "#slider-test_1" ).noUiSlider( options, true /* Allow destruction + rebuilding */ );

            }
        };
    });

将maxValue从无线电类型绑定到rootScope并尝试获取，但新值未反映在视图中。如何根据无线电类型更改MaxValue。

需要帮助，并提前致谢。

Answer 1

您正在创建属性。您可以使用此代码来实现您的目标

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
<input type="radio" ng-model="maxValue" value="100">100
<input type="radio" ng-model="maxValue" value="200">200
<input type="radio" ng-model="maxValue" value="300">300
<br>your model value {{maxValue}}
<br>

<nouislider class="bg-master m-b-10"  id="slider-tooltips" max-value="maxValue">
  directive value {{value}}
</nouislider>
  </body>

</html>


    // app.js
    var app = angular.module('plunker', []);

    app.controller('MainCtrl', function($scope) {
      $scope.name = 'World';
      $scope.maxValue = "0";
    });

    app.directive('nouislider',['$parse', function($parse) {
            return {
                restrict: 'E',
                scope:{
                 'value': "=maxValue"
                },
                link: function($scope, element, attrs) {
                    var newVal = $scope.value;
                }
            };
    }]);

Answer 2

这是一个工作的plunker，带有一个输入来设置滑块的最大值：https://plnkr.co/edit/yG140JyI9tZsFdfskXl2?p=preview

你的代码中的问题是你永远不会更新滑块的选项，我相信有更好的方法来做到这一点，而不是像我一样使用观察者。在您的情况下，您应该在复选框上绑定 ng-click 或 ng-change ，并在那里更新您的选项。

应该是这样的：

<input type="radio" ng-model="maxValue" ng-change="updateOption()" value="100">100
<input type="radio" ng-model="maxValue" ng-change="updateOption()" value="200">200

scope.updateOption = function() { 
      scope.options = {
      start: scope.start,
      min: scope.min,
      max: scope.maxValue
    };
}

希望这有帮助。

如何使滑块的MaxValue动态化？

2 个答案: