剣道プログレスバーの変更

Question

Angular Jsの剣道ツリーの中に私は剣道のテンプレートとしてGraphを追加しました。

<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の値を表示することができます。

私はタイプパーセントのそれを作るためにどのよう

• を、次の表示方法がわからないしかし割合> 50は、グラフを表示する場合は、私はK型=「パーセント」は運
• てみました黄色でテキスト（50％）が赤色で表示されます

Answer 1

残念なことに、いくつかのオプションは角度指示文では機能しないようです。私はk-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：this pageをチェックした後、私はtype以下の方法を使用することができます。それはパーセント型作業を行います。

これで、値に基づいてウィジェットの色を変更することも別の問題です。 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を。繰り返しますが、ウィジェットのようなシンプルで便利な機能が欠けているのは残念です。

私は間違っていると思っていますが、これは私がこれで得ることができる遠方です。がんばろう。