我想知道如何设置控件的值,该控件使用data-plugin-options来设置仪表控件的值。
我有这个html标记:
<div class="form-group" style="text-align: center;">
<div class="demo-label">Average Speed</div>
<div style="text-align: center;">
<div class="gauge-chart">
<canvas id="gaugeBasic" width="180" height="110" data-plugin-options='{ "value": 2150, "maxValue": 3000 }'></canvas>
<label id="gaugeBasicTextfield"></label>
</div>
</div>
</div>
使用另一个不同的控件,即Angular指令,我可以像这样声明和设置所需的值
<ridge-speedometer x-val="AverageSpeed"/>
现在而不是该控件,我想使用上面的标记,并且当前的值为2150,我想使用AverageSpeed值。
我该怎么做?
要使平均值速度在用户界面上可用,您需要将其附加到控制器或$ scope上,如下所示:
$scope.AverageSpeed = 2150;
为了清洁起见,您真正应该做的是也将对象从data-plugin-options中提取到控制器中,如下所示:
$scope.options = {
value: $scope.AverageSpeed,
maxValue: 3000
}
然后按如下所示将其插入您的UI:
<canvas id="gaugeBasic" width="180" height="110" data-plugin-options="options"></canvas>