我是 AngularJs 的新手，我遇到了一个问题。我想根据 radio 类型值更改 slider 的最大值。
这是我的 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 */ );
}
};
});
我将 radio 类型的 maxValue 绑定(bind)到 rootScope 并尝试获取，但新值没有反射(reflect)在 View 中。如何根据 radio 类型更改 MaxValue。
需要帮助并提前致谢。
最佳答案
您正在创建该属性。您可以使用此代码来实现您的目标
<!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;
}
};
}]);
关于javascript - 如何让 slider 的MaxValue动态化？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45569531/