剑道进度条修改

Question

在 Angular Js 的剑道树列表中，我添加了一个图表作为剑道模板。

    <script id="progressStatus" type="text/x-kendo-template">
                    <div ng-if="'#:Status#' == 'Loading'">
                        <div kendo-progress-bar="progressBar1"  k-min="0" k-max="100" k-value="#:Percentage#" style="width: 100%;"></div>
                    </div>
    </script>

我将它绑定到树列表作为列声明的一部分

{ field: "Status", template: $("#progressStatus").html(), width: "170px" }

到目前为止还不错。而且我能够在 UI 中显示该值。

但是我不确定如何显示关注

• 如何将其设为百分比类型，我尝试使用 k-type='percent' 但没有运气
• 如果百分比 > 50，则图表以黄色显示，文本 (50%) 以红色显示

Answer 1

不幸的是，某些选项似乎不适用于角度指令。我无法上班k-type（像你一样）。在我的道场中，该属性似乎破坏了小部件。检查this page 后，我可以通过以下方式使用type：

<div kendo-progress-bar="progressBar1" k-options="progressBarOptions" style="width: 100%;"></div>

.controller("MyController", function($scope) {
    $scope.dataSource = [
      'foo', 'bar', 'baz'
    ];

    $scope.progressBarOptions = {
      min: 0,
      max: 100,
      value: 50,
      type: "percent"
    };
  });

Demo。这将使百分比类型起作用。

现在，根据值更改小部件的颜色是另一个问题。 ProgressBar 没有任何类型的模板，它在events（只有complete 和change）方面很差。看起来你的酒吧并没有改变它的价值，它是静态的，对吧？所以我试图实现一种用animation 调用change 事件的方法，完成后应该调用change。这就像一个初始化事件。但是，动画似乎也不起作用。我尝试使用 k-animation 和 init 选项，但没有运气。仔细检查了拼写错误，但我确信情况并非如此。这是一个耻辱。

无论如何，你可以使用一个你应该在网格的dataBound 事件中调用的函数来使用丑陋和不直接的方式：

var changeBarColor = function()
{
  $('[data-role="progressbar"]').each(function() {
    $(this).find(".k-state-selected").addClass(
      $(this).data("kendoProgressBar").value() < 50 
        ? "yellow-bar"
        : "red-bar"
    );
  });
};

Demo。再说一次：很遗憾，小部件缺少这样一个简单而有用的功能。

我希望我错了，但这是我能做到的。祝你好运。