2014-01-09 53 views
2

我一直在使用Angular作为项目,并且刚刚在http://kendo-labs.github.io/angular-kendo/#/上发现了Kendo-Angular项目。我成功地将Angular-Kendo添加到了我的项目中,并且它的工作方式与我之前所认为的更新模型的例外情况类似。更改角度模型以更新Kendo

该项目正是我正在寻找的,但是,文档中没有任何示例显示您可以更新Angular模型,因此它更新了Kendo数据源。

这里是例如一段代码:

$scope.data = new kendo.data.DataSource({ 
    data: [{ 
     name: "India", 
     data: [10, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855] 
    }, { 
     name: "World", 
     data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727] 
    }, { 
     name: "Russian Federation", 
     data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, 7.832, 4.3, 4.3] 
    }, { 
     name: "Haiti", 
     data: [0.253, 0.362, 3.519, 1.799, 2.252, 3.343, 0.843, 2.877, 5.416, 5.590] 
    }] 
}); 

具有角,可以预期,使这样的事情:

<input ng-model="data[0].data[0]" /> 

在输入字段的输出是10。但是,将此数据传递给图并尝试更改输入框中的值时,图不会更新。

任何有这些特定图书馆经验的人都知道如何实现类似的东西?这种支持是否存在?这只是一个图书馆,使剑道与Angular一起工作,仅此而已?

回答

2

我解决了这个问题,但现在以我期待的方式。

我只是将一个变化事件绑定到输入上,并调用Kendo redraw()方法,并在每次更新模型时重绘。考虑到在剑道这一切都有一个全面的努力有点恼人。你会认为2路绑定可用。

如果有的话还在寻找更好的答案。

+0

你是否采用了棱角分明的剑道UI? – victormejia

+0

@victorczm是的。 – Sethen

+1

如果你有一个演示或代码示例,你会做些什么 – Alex

2

注意,角剑道和/或人的作者(S)与AngularJS的更深入的了解可能会用石头砸我的“做错了”,但在这里有云:

角剑道已经使用数据源上$watch,所以如果你添加一些代码什么它最初是在那里做,比如像这样:

scope.$watch(attrs.kDataSource, function (mew, old) { 
    if (mew !== old) { 
     element.data('$kendoDataSource', toDataSource(mew, type)); 

     var role = element.data("role"); 
     var widgetType = role.charAt(0).toUpperCase() + role.slice(1); 
     var w = element.data("kendo" + widgetType);; 

     if (!w) { 
      w = kendo.widgetInstance(element, kendo.ui); 
     } 

     if (w && typeof w.setDataSource === "function") { 
      w.setDataSource(element.data('$kendoDataSource')); 
     } 
    } 
}, true); 

则行为你要找的作品。我不知道为什么这个(好吧,类似的东西,但更好)没有实施;对我来说,这似乎是一个核心功能,但可能有一些原因我不明白(我没有真正阅读过所有的源代码)。在任何情况下,不得不手动将更改事件处理程序附加到输入以更新您的用户界面,这对我来说似乎也不是很“尖锐”。

Demo为咯咯。免责声明:我不负责任何事情。不要使用这个。

编辑:在看了角度剑道问题跟踪器后,看起来他们打算做类似的事情(从comment by @BurkeHolland here来判断),所以也许这并非完全错误;我更新了演示,使其更具可读性

1

我对这个解决方案并不满意,但我认为这是做这个绑定的最好方法。解决方案是使用kendo.data.ObservableArray或kendo.data。数据源备份数据网格,然后更新ObservableArray或数据源中的控制器:

angular.module('MyApp').controller('MyController', function($scope, $http) { 
    $scope.products = new kendo.data.DataSource({ 
     data: [],   // kendo watches this array 
     pageSize: 5 
    }); 

    $http.get('data/products.json').then(function(result) { 
     // update the Kendo DataSource here. 
     $scope.products.data(result.data); 
    }); 
}); 

的HTML看起来像这样:

<div kendo-grid 
    k-data-source="products" 
    k-selectable="'row'" 
    k-columns='[{ "field": "ProductName",   "title": "Name" }, 
       { "field": "Supplier.SupplierName", "title": "Supplier" }, 
       { "field": "Category.CategoryName", "title": "Category" }]' 
    k-sortable="true" 
    k-groupable="true" 
    k-filterable="true"> 
</div> 
+1

你应该如何从网格中获取所有的分页,排序等参数? – KingOfHypocrites