剣道のUIダイアグラムとローカルでデータをバインドする方法は？

剣道UI図を使用してBPMN図（アクティビティフロー）を表します。剣道のUIダイアグラムとローカルでデータをバインドする方法は？

また、角度を使用します。

シェイプデータソースにオブジェクトの配列をバインドするにはどうすればいいですか、この配列の変更はすべて剣道UIダイアグラムの同じ変更を模倣しますか？

更新：私は角JSなし例を見つけました：http://dojo.telerik.com/ILUCOQここ

2017-06-07 Eran Betzalel

-1

スコープを定義し、パラメータとして機能するように、あなたがスコープを変更する動的に変更することができ、およびスコープの変化に渡すことができます再UIを新しいパラメータ[scope]でレンダリングするそれらの関数を呼び出します。

<!DOCTYPE html> 
<html> 
<head> 
<base href="http://demos.telerik.com/kendo-ui/diagram/angular"> 
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
<title></title> 
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-material.min.css" /> 
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.min.css" /> 
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.material.mobile.min.css" /> 

<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script> 
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/angular.min.js"></script> 
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script> 
</head> 
<body> 
<div id="example" ng-app="KendoDemos"> 
<div class="demo-section k-content wide" ng-controller="MyCtrl"> 
    <div kendo-diagram k-options="options"></div> 
</div> 
</div> 
<script> 
angular.module("KendoDemos", ["kendo.directives"]) 
    .controller("MyCtrl", function($scope){ 
        $scope.change = [3,3,2]; // You Can Dynamically Change this scope that will reflect the UI 

     $scope.options = { 
      dataSource: { 
       data: diagramNodes($scope.c), 
       schema: { 
        model: { 
         children: "items" 
        } 
       } 
      }, 
      layout: { 
       type: "tree", 
       subtype: "down", 
       horizontalSeparation: 30, 
       verticalSeparation: 20 
      }, 
      shapeDefaults: { 
       width: 40, 
       height: 40 
      } 
     }; 
    }) 

function diagramNodes(data) { 
     var root = { name: "0", items: [] }; 
     addNodes(root, data); 
     return [root]; 
    } 

    function addNodes(root, levels) { 
     if (levels.length > 0) { 
      for (var i = 0; i < levels[0]; i++) { 
       var node = { name: "0", items: [] }; 
       root.items.push(node); 

       addNodes(node, levels.slice(1)); 
      } 
     } 
    } 
</script> 
</body> 
</html>

出典

2017-06-07 16:41:15

ありがとうございます。コード例ありがとうございますが、動作していないようです。 –

それはそのように実行する必要がありますか？ https://plnkr.co/edit/50udleuJtxHEMSfv9qWd –

剣道のUIダイアグラムとローカルでデータをバインドする方法は？

答えて

関連する問題