更改剑道图表类型的模型AngularJS

编辑绑定：我在这里再现了问题.. http://dojo.telerik.com/@Salmal/OcALi 更改剑道图表类型的模型AngularJS

我是新来的剑道UI和我使用的剑道指令在我的角度应用程序。我有要求使用事件更改图表的类型。比方说，当用户点击一个按钮时，我想将图表从条形图更改为饼图。请参阅下面的我的代码。

Controller.js

$scope.chartData = [ 
     { 
      "name": "Books", 
      "amount": 200 
     }, 
     { 
      "name": "Newspapers", 
      "amount": 320 
     }, 
     { 
      "name": "Magazines", 
      "amount": 225 
     }, 
     { 
      "name": "Shoes", 
      "amount": 400 
     } 
     ]; 

     $scope.update = function() { 
      $scope.ChartType = { type: 'pie' }; 
     }; 

     $scope.ChartType = {type: 'bar' };

View.html

<div class="demo-section k-content wide"> 
    <div> 
     <h4>Hover some series</h4> 
     <div kendo-chart 
      k-legend="{ position: 'bottom' }" 
      k-series-defaults="ChartType" 
      k-series="[{ field: 'amount', categoryField: 'name'}]" 
      k-data-source="chartData" 
      k-rebind="chartData"> 
     </div> 
    </div> 
</div> 
<button kendo-button ng-click="update()"> 
    Update from code 
</button>

在上面的代码中update()功能得到执行成功，还分配 “蛋糕” 的图表类型到$scope.ChartType变量。但这并不反映在这个观点中。这意味着Angular模型绑定不起作用。我错过了一些基本的东西？任何帮助将不胜感激..

来源

2016-02-08 Malik

我很确定$ scope.ChartType没有被监视。您需要为您的图表做一些重绘功能（我认为，我不熟悉kendo ui）或找到更新图表的方法。基本上，它应该是这样的：

$scope.$watch("ChartType", function(newValue, oldValue) { 
    if(newValue !== oldValue) { 
     //redraw the chart 
    } 
}, true);

编辑我固定它用在编辑器中的代码。这里是：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"/> 
    <title>Kendo UI Snippet</title> 

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css"/> 

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/angular.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script> 
    <style> 
    html { 
     font-size: 14px; 
     font-family: Arial, Helvetica, sans-serif; 
    } 
    </style> 
</head> 
<body> 

<div ng-app="app" ng-controller="MyCtrl"> 

    <div class="demo-section k-content wide"> 
     <div> 
      <h4>Hover some series</h4> 
      <div kendo-chart 
       k-legend="{ position: 'bottom' }" 
       k-series-defaults="options.chartType" 
       k-series="[{ field: 'amount', categoryField: 'name'}]" 
       k-data-source="options.dataSource" 
       k-rebind="options"> 
      </div> 
     </div> 
    </div> 
    <button kendo-button ng-click="update()"> 
     Update from code 
    </button> 
    <br/> 
    <br/> 
    {{ChartType}} 
</div> 
<script> 

angular.module("app", ["kendo.directives"]).controller("MyCtrl", function($scope) { 
    $scope.chartData = [ 
     { 
      "name": "Books", 
      "amount": 200 
     }, 
     { 
      "name": "Newspapers", 
      "amount": 320 
     }, 
     { 
      "name": "Magazines", 
      "amount": 225 
     }, 
     { 
      "name": "Shoes", 
      "amount": 400 
     } 
     ]; 

     $scope.update = function() { 
      console.log("doing update"); 
      $scope.ChartType = { type: 'bar' }; 
     }; 

     $scope.ChartType = { type: 'pie' }; 

     $scope.options = { 
     chartType: $scope.ChartType, 
     dataSource: $scope.chartData 
     }; 

     $scope.$watch("ChartType", function(newValue){ 
     $scope.options.chartType = newValue; 
     }); 

}); 
</script> 
</body> 
</html>

如果你把它粘贴在那个dojo编辑器中，它就可以工作。你需要看，我只是不知道如何处理剑道指令。我找到了kendo指令更改的答案here。对不起原解答中的错误解释。

解释一下：我做了一个新的变量选项。我把选项放在k-rebind上，因为这个指令似乎在监视k-rebind的变化。但我想要kendo指令来监视数据更改和类型更改。然后，您需要查看chartType以及更改时间，将更改应用到绑定到k-rebind的变量的属性。

来源

2016-02-08 15:29:51

感谢您的回复。但我不认为我需要使用“手表”来使用绑定。当你从视图中改变范围变量时，它应该在ctrl中更新它。但是这里的问题是，在呈现When kendo时，chartType变量与原始chartType变量失去连接。这里提到它。 http://docs.telerik.com/kendo-ui/AngularJS/data-source#update-the-datasource-object – Malik

我在这里转载了这个问题.. http://dojo.telerik.com/@Salmal/ OcALi – Malik

你是对的。我完全以错误的方式解释了它。但我修好了，但 –

更改剑道图表类型的模型AngularJS

回答

相关问题