如何获得AngularJS和KendoUI和谐工作吗？如何获得、和谐、工作、KendoUI
在的阶段，我安装我的.Net MVC解决方案，并确保这两个角JS和KendoUI是独立工作的。
In stages, I setup my .Net MVC solution and ensured both Angular JS and KendoUI are working independently.
app.js：
var app = angular.module("app", ['kendo.directives']);
在我的控制，我有以下定义：
and in my controller, I have the following defined:
app.controller('contentTypesController', ['$scope', '$log', 'contentTypesRepository',
function ($scope, $log, contentTypesRepository) {
var a = {};
$scope.status;
$scope.contentTypes;
$scope.contentTypeOptions;
// for testing purposes, but not used - used for navigation properties
$scope.users;
getContentTypes();
function getContentTypes() {
// call the data repository
contentTypesRepository.getList()
.success(function (contentTypes) {
//console.log(contentTypes.value[0].Description);
//$log.log(contentTypes.value[0].Description)
$scope.contentTypes = contentTypes;
$scope.contentTypeOptions = {
dataSource: {
data: contentTypes
},
dataTextField: "Description",
dataValueField: "ContentTypeId",
optionLabel: "Select a Content Type"
};
})
.error(function (error) {
$scope.status = 'Unable to load data: ' + error.message;
});
}
$scope.updateContentTypes = function (id) {
var contentType;
for (var i = 0; i < $scope.contentTypes.length; i++) {
var currentType = $scope.contentTypes[i];
if (currentType.ID === id) {
contentType = currentType;
break;
}
}
};
$scope.insertContentType = function () {
// get contentType description from the client
var contentType = { 'Description': $scope.newContentType };
contentTypesRepository.insert(contentType)
.success(function () {
$scope.status = 'Added new content type. Refreshing list.';
// add the new content type to the client-side collection
$scope.contentTypes.value.push(
{ 'Description': $scope.newContentType }
);
$scope.newContentType = "";
})
.error(function (error) {
$scope.status = 'Unable to insert new content type: ' + error.message;
});
};
$scope.deleteContentType = function(id) {
contentTypesRepository.remove(id)
.success(function () {
$scope.status = 'Deleted content type. Refreshing list.';
for (var i = 0; i < $scope.contentTypes.length; i++) {
var contentType = $scope.contentTypes[i];
if (contentType.ID === id) {
// remove the content type from the client-side collection
$scope.contentTypes.splice(i, 1);
break;
}
}
// navigation properties = null
// $scope.xxxx = null;
})
.error(function (error) {
$scope.status = 'Unable to delete content type: ' + error.message;
});
};
// get some navigation property
//$scope.getCustomerOrders = function (id) {
// dataFactory.getOrders(id)
// .success(function (orders) {
// $scope.status = 'Retrieved orders!';
// $scope.orders = orders;
// })
// .error(function (error) {
// $scope.status = 'Error retrieving customers! ' + error.message;
// });
//};
$scope.addContentType = function () {
//return $scope.newContentType.$save();
$scope.contentTypes.value.push(
{ 'Description': $scope.newContentType }
);
$scope.newContentType = "";
}
在继Angluar /剑道例子这里，我加code与 $ scope.contentTypeOptions 。
In following the Angluar/Kendo examples here, I added code related to $scope.contentTypeOptions.
在我看来：
<select kendo-drop-down-list k-options="contentTypeOptions"></select>
它显示一个下拉菜单，但没有数据。
Which displays a dropdown, but no data.
我能够在 NG-中继器来查看数据：
<ul>
<li ng-repeat="contentType in contentTypes.value">
{{ contentType.Description }}
</li>
</ul>
和按的原始数据{{} contentTypeOptions} 。
由于直放站使用contentTypes.value，我试过这个问题，以及
Since the repeater uses contentTypes.value, I tried this as well in
$scope.contentTypeOptions = {
dataSource: {
data: contentTypes.value // tried both contentTypes and contentTypes.value
},
dataTextField: "Description",
dataValueField: "ContentTypeId",
optionLabel: "Select a Content Type"
};
...这是基于JSON数据
... which is based on the JSON data:
最后，我想获得迷上了一格的所有CRUD（我用的OData过去所做的那样，但是现在加入AngularJS的组合）和思想简单地在角/剑道混合显示的数据将是一个良好的开端。我希望以后获得这个牵制其余的将是简单的，和AP preciate任何建议。
Ultimately, I would like to get all the CRUD hooked up for a grid (which I have done in the past with OData, but now adding AngularJS to the mix) and thought simply displaying the data in an Angular/Kendo mix would be a good start. I'm hoping that after getting this pinned down the rest will be simple, and appreciate any suggestions.
推荐答案
您code是因为像 $ scope.updateContentTypes 治疗 $ scope.contentTypes 作为一个数组，但在同一时间 CONTENTTYPES 似乎是与属性值这是一个数组。
Your code is a bit confusing since methods like $scope.updateContentTypes treat $scope.contentTypes as an array, but at the same time contentTypes appears to be an object with a property value which is an array.
有一点要注意的是，剑道UI部件将阵列转换为数据源剑道内部。这意味着，您对 $ scope.contentTypes 变化不会影响在 $ scope.contentTypeOptions 。
One thing to be aware of is that Kendo UI widgets will convert your array to a Kendo DataSource internally. This means that changes you make to $scope.contentTypes won't affect the items in your data source in $scope.contentTypeOptions.
另一个问题是，有没有完全双向的小部件，并在角剑道数据源之间的结合，直到最近，数据源将不会在所有的，除非你明确声明它作为一个DataSource更新。已经有一些最近的改进，但它仍然没有完全整合，据我所看到的。（你可以尝试创建的数据自己一个深刻的手表，但可能产生性能问题，请参见相关张贴在这里）。
Another issue is that there is no full two-way binding between widgets and the data source in angular-kendo, and until recently, the data source wouldn't update at all unless you specifically declared it as a DataSource. There have been some improvements lately, although it's still not fully integrated, as far as I can see. (you can try creating a deep watch on the data yourself, but that may create performance problems; see related post here).
您下拉，因为你替换 $ scope.contentTypeOptions 创建部件后，并没有 $手表不显示数据上的属性，将更新这些选项的小部件。你可以明确地创建一个数据源，并更新与
Your dropdown doesn't show the data because you replace $scope.contentTypeOptions after creating the widget, and there is no $watch on that property that would update the widget with these options.
You can either create a DataSource explicitly and update that with:
$scope.contentTypeOptions.dataSource.data(contentType.value);
或者你可以使用属性：
or you can use the attribute:
k-data-source="contentTypes"
这将创建一个 $观看在 $ scope.contentTypes ，所以当你更换的部件将更新也是如此。
which will create a $watch on $scope.contentTypes, so when you replace it, the widget will update as well.
也许这一基本（但无可否认的有点乱）例如会帮助你有点（我设置起来，你也做了同样的方式第二个下拉菜单;更改按钮更新数据源）
Maybe this basic (although admittedly a bit messy) example will help you somewhat (I set up the 2nd dropdown in the same way you did; the "change" button updates the data source).
