问题：
如何绑定外键kendo ui dropdownlist（带角度）
东门越
我正在使用剑道用户界面和角度网格应用程序。我的网格由JSON数据（单独的文件）填充，我正在使用angular service：
我的JSON数据：
[
{ "Id": 1, "AccountNo": "10236", "PostingDate": "20.01.2015", "MaturityDate": "24.01.2015", "Description": "description1", "DocumentTypeId": 1 },
{ "Id": 2, "AccountNo": "10648", "PostingDate": "26.01.2015", "MaturityDate": "28.01.2015", "Description": "description2", "DocumentTypeId": 2 },
{ "Id": 3, "AccountNo": "10700", "PostingDate": "22.01.2015", "MaturityDate": "25.01.2015", "Description": "description3", "DocumentTypeId": 3 },
{ "Id": 4, "AccountNo": "10810", "PostingDate": "24.01.2015", "MaturityDate": "27.01.2015", "Description": "description4", "DocumentTypeId": 2 },
{ "Id": 5, "AccountNo": "10101", "PostingDate": "29.01.2015", "MaturityDate": "30.01.2015", "Description": "description5", "DocumentTypeId": 4 },
{ "Id": 6, "AccountNo": "10364", "PostingDate": "25.01.2015", "MaturityDate": "31.01.2015", "Description": "description6", "DocumentTypeId": 6 }
]
我的Angular服务：
angular.module("app").factory('myService', function ($http) {
return {
getAll: function (onSuccess, onError) {
return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {
onSuccess(data);
}).error(function (data, status, headers, config) {
onError(data);
});
},
getDocumentTypes: function (onSuccess, onError) {
return $http.get('/Scripts/app/data/json/documentType.js').success(function (data, status, headers, config) {
onSuccess(data);
}).error(function (data, status, headers, config) {
onError(data);
});
}
}
});
这是我的控制器：
var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {
$scope.tabStrip = null;
$scope.$watch('tabStrip', function () {
$scope.tabStrip.select(0);
});
$scope.masterDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
url = "/Scripts/app/data/json/master/masterGridData.js",
myService.getAll(function (data) {
options.success(data);
}).error(function (data) {
options.error(data);
})
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
AccountNo: { type: "string" },
PostingDate: { type: "string" },
MaturityDate: { type: "string" },
Description: { type: "string" },
DocumentTypeId: { type: "number" }
}
}
},
pageSize: 16
});
$scope.gridMaster = {
columns: [
{ field: "Id", hidden: true },
{ field: "AccountNo", title: "Account No", width: "77px", template: '<div style="text-align:left;">#= kendo.toString(AccountNo) #</div>' },
{ field: "PostingDate", title: "Posting Date", width: "70px" },
{ field: "MaturityDate", title: "Maturity Date" width: "70px" },
{ field: "Description", title: "Description", width: "170px" },
{ field: "DocumentTypeId", hidden: true }
],
dataSource: $scope.masterDataSource,
selectable: true,
filterable: true,
scrollable: true,
pageable: {
pageSize: 16,
//refresh: true,
pageSizes: ["50", "100", "200", "All"]
},
toolbar: [{
name: "create"
}],
change: function () {
var dataItem = this.dataItem(this.select());
$scope.isRowSelected = true;
$scope.id = dataItem.Id;
$scope.accountNumber = dataItem.AccountNo;
$scope.postingDate = dataItem.PostingDate;
$scope.description = dataItem.Description;
$scope.maturityDate = dataItem.MaturityDate;
$scope.documentTypeId = dataItem.DocumentTypeId;
}
};
$scope.documentType = {
dataSource: {
transport: {
read: function (options) {
url = "/Scripts/app/data/json/documentType.js",
myService.getDocumentTypes(function (data) {
options.success(data);
}).error(function (data) {
options.error(data);
});
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" }
}
}
}
},
dataTextField: "Name",
dataValueField: "Id"
}
});
这是我的JSON，其中包含documentType的数据：
[
{ "Id": 1, "Name": "Document 1" },
{ "Id": 2, "Name": "Document 2" },
{ "Id": 3, "Name": "Document 3" },
{ "Id": 4, "Name": "Document 4" },
{ "Id": 5, "Name": "Document 5" },
{ "Id": 6, "Name": "Document 6" }
]
这是我的HTML：
<html>
<head>
<!-- css and javaScript files -->
</head>
<body ng-app="app" ng-controller="myController">
<div class="divH3Style">
<h3 class="h3LabelForm">Grid Master</h3>
</div>
<div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip">
<ul>
<li>Overview</li>
<li>Update</li>
</ul>
<div id="tabstrip-1">
<div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource">
</div>
</div>
<div id="tabstrip-2" style="overflow: hidden">
<div id="tabStrip2Half1">
<div class="divHeightStyle">
<label for="accountNumber" class="labelTextSize">Account Number:</label>
<input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="accountNumber" placeholder="Account Number" />
</div>
<div class="datepickerStyle">
<label for="postingDate" class="labelTextSize">Posting Date:</label>
<input id="postingDate" class="k-datetimepickerMaster" name="postingDate" ng-model="postingDate" />
</div>
<div class="divHeightStyle">
<label for="desccription" class="labelTextSize">Description:</label>
<input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" />
</div>
<div class="datepickerStyle">
<label for="maturityDate" class="labelTextSize">Maturity Date:</label>
<input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="maturityDate" />
</div>
</div>
<div id="tabStrip2Half2">
<div class="divHeightStyle">
<label for="documentType" class="labelTextSize">Document Type:</label>
<select kendo-drop-down-list
class="k-dropdownField" k-options="documentType"
ng-model="documentTypeId" ng-bind="documentTypeId"></select>
</div>
<div>
<button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" onclick="saveDataMasterGrid()">Save</button>
<button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" onclick="cancelButtonMasterGrid()">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
在超文本标记语言中，我有一个包含文档类型数据的dropdown列表，我的dropdown列表中填充了JSON数据。但是，问题在于绑定。当我选择一些网格行时，下拉列表总是显示第一项。我的网格数据源包含外键值（文件类型），该值应与文件类型JSON文件的ID值匹配，即$scope.document类型属性dataValueFiledvalue。如何绑定这个dropdown列表？请帮助...
共有1个答案
壤驷棋
为了解决这个问题，我使用hardCoded变量：
$scope.documentTypeDS = [
{ "value": 1, "text": "doc 1" },
{ "value": 2, "text": "doc 2" },
{ "value": 3, "text": "doc 3" },
{ "value": 4, "text": "doc 4" },
{ "value": 5, "text": "doc 5" },
{ "value": 6, "text": "doc 6" }
];
并修改了gridMaster的定义。在gridMaster列属性中，我插入：
{ field: "DocumentTypeId", hidden: true, values: $scope.documentTypeDS },
在HTML中，我修改了以下代码行：
<select kendo-drop-down-list
class="k-dropdownField" k-options="documentType"
ng-model="documentTypeId" ng-bind="documentTypeId"></select>
对此：
<input kendo-drop-down-list k-data-text-field="'text'" k-data-value-field="'value'" data-bind="value:documentTypeId"
class="k-dropdownField" k-data-source="documentType" ng-readonly="isReadonly" ng-model="documentTypeId" />
我认为有更好的解决方案，因为我使用代码的硬编码部分来定义$scope。文档类型。
类似资料：
-
编辑问题包括期望的行为, 我正在编写一个Angular 2应用程序，我不明白为什么Angular不能正确使用
-
角色绑定定义了角色绑定和服务账户的绑定关系。 角色绑定定义了角色和服务账户的绑定关系，从而控制服务账户的操作权限。多集群资源的角色绑定支持绑定到集群上，批量在集群中创建相同的角色绑定。 入口：在云管平台单击左上角导航菜单，在弹出的左侧菜单栏中单击 “容器/多集群资源/角色绑定” 菜单项，进入角色绑定页面。 新建角色绑定 该功能用于新建多集群的角色绑定，在新建多集群的角色绑定之前，请先创建多集群的命
-
角色绑定定义了角色和服务账户的绑定关系。 角色绑定定义了角色和服务账户的绑定关系，从而控制服务账户的操作权限。 角色绑定的详细介绍请参考Kubernetes官方文档-RBAC。 入口：在云管平台单击左上角导航菜单，在弹出的左侧菜单栏中单击 “容器/集群/角色绑定” 菜单项，进入角色绑定页面。 查看角色绑定 该功能用于基于集群、命名空间筛选角色绑定信息。 在角色绑定页面，默认查看一个集群下所有命名空
-
问题内容： 背景 我的窗口是一个java.awt.Frame，并且在Frame内部是两个面板（java.awt.Panel）。我正在尝试使窗口能够处理我按下的按钮。 尝试1号 我尝试使用KeyListener，使Frame实现KeyListener。我将KeyListener添加到了Frame中，但是当我按下键时，KeyListener函数没有执行任何操作。（我尝试使用System.out.pri
-
问题内容： 我有一个角度应用程序，它通过简单的表达式绑定显示由控制器方法返回的值： 如果所讨论的方法仅返回一个值，则该方法将被调用两次，这很奇怪： 但是，如果该方法执行一些异步工作，例如从服务器获取文件，则代码将进入无限循环： 我是Angular的新手，所以这里可能错过了一些基本的知识，但是有人可以解释一下发生了什么吗？ 柱塞 这是一个与http://plnkr.co/7BriYDbdVJvIoI
-
问题内容： 在我们的MVC 5项目中，我们使用Angular。以下剃刀效果很好： 但是，如果在呈现页面时将MVC Model.FirstName 设置为“ Bob”，则“输入”字段仍为空白。 如果我在Angular控制器中设置此设置： 然后出现“鲍勃”。 我的问题是：是否必须为UI中的每个字段设置 $ scope.VARIABLE = MODEL.VARIABLE ，或者我可以告诉Angular尊