更改劍道圖表類型的模型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

回答

相關問題