[英]How to bind the values dynamically in angular-bootstrap-model?
在这里,我必须使用angular-bootstrap-slider动态绑定刻度,值,最大值和最小值。 但是我无法约束这些价值观。
控制器:
var app = angular.module("sliderApp", ['ui.bootstrap-slider']);
app.controller('sliderCtrl', function ($scope, $http) {
var labels =[{ "val": 1, "txt": "one" }, { "val": 2, "txt": "2" }, { "val": 3, "txt": "3" }, { "val": 4, "txt": "4" }, { "val": 5, "txt": "5+" }];
var ticks = [12, 24, 36, 48, 60, 72];
/* maximum value functionality*/
function getMax(labels, prop) {
var max;
for (var i = 0 ; i < labels.length ; i++) {
if (!max || parseInt(labels[i][prop]) > parseInt(max[prop]))
max = labels[i];
}
return max;
}
$scope.sliderMaxVal = getMax(labels, "val").val;
console.log($scope.sliderMaxVal);
/* Minimum value functionality*/
function getMin(labels, prop) {
var min;
for (var i = 0 ; i < labels.length ; i++) {
if (!min || parseInt(labels[i][prop]) < parseInt(min[prop]))
min = labels[i];
}
return min;
}
$scope.sliderMinVal = getMin(labels, "val").val;
$scope.vfg = 1200;
this.sliderValue = 53;
this.sliderLabels = function () {
return labels;
}
this.sliderTicks = function () {
return ticks;
}
this.myFormatter = function (value) {
console.log('value %s', value);
return '<span class="tooltip-header-title">' + value + ' months </span><br> ' + (value - 1) + ' payments + VFG <span class="glyphicon glyphicon glyphicon-tags" aria-hidden="true"></span>';
}
});
HTML:
<div class="col-md-4 .col-xs-4">
<div ng-controller="sliderCtrl as slider">
<slider ng-model="slider.sliderValue" min="{{sliderMinValue}}" step="1" max="72" value="sliderApp.sliderValue" ticks="slider.sliderTicks()" ticks-labels="slider.sliderLabels()" formatter="slider.myFormatter" tooltip="always"></slider>
<p>Value: {{slider.sliderValue}}</p>
<p>VFG: {{vfg}}</p>
</div>
</div>
现在,我必须绑定滑块的最小值和最大值,例如{{sliderMinValue}}和{{sliderMaxValue}},而不是静态值。 但是当我这样做时,我得到了如下图所示的错误类型:
柱塞: https ://plnkr.co/edit/mSuWAtL89DEDE88pwAm5 ? p = preview
尝试更改它以使用ng-min
和ng-max
:
<slider ng-model="slider.sliderValue"
ng-min="slider.sliderMinVal"
ng-max="slider.sliderMaxVal"
step="1"
value="sliderApp.sliderValue"
ticks="slider.sliderTicks()"
ticks-labels="slider.sliderLabels()"
formatter="slider.myFormatter" tooltip="always">
</slider>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.