使用 AngularJs 的 Kendo UI:如何在用户选择网格中的行时绑定文本框字段上的数据 [英] Kendo UI with AngularJs: How to bind data on textbox fields when user select row in a grid
问题描述
我正在使用 Kendo UI 和角度网格应用程序.在我的应用程序中，我定义了 Kendo TabStrip.在第一个选项卡中，我有带有数据的 Kendo UI 网格，第二个选项卡包含适当的文本框字段，当用户选择网格中的某些行时将填充这些字段.我的网格在加载页面时填充了数据并且它运行良好，但数据绑定到文本框字段不起作用.用户在网格中选择行时如何绑定文本框字段上的数据?
这是我的 JSON 数据(在单独的文件中):
<预><代码>[{ "Id": 1, "AccountNo": "10236", "PostingDate": "20.01.2015", "MaturityDate": "24.01.2015", "Description": "description1", "DocumentType": "doc1"},{ "Id": 2, "AccountNo": "10648", "PostingDate": "26.01.2015", "MaturityDate": "28.01.2015", "Description": "description2", "DocumentType": "doc2"},{ "Id": 3, "AccountNo": "10700", "PostingDate": "22.01.2015", "MaturityDate": "25.01.2015", "Description": "description3", "DocumentType": "doc3"},{ "Id": 4, "AccountNo": "10810", "PostingDate": "24.01.2015", "MaturityDate": "27.01.2015", "Description": "description4", "DocumentType": "doc4"},{ "Id": 5, "AccountNo": "10101", "PostingDate": "29.01.2015", "MaturityDate": "30.01.2015", "Description": "description5", "DocumentType": "doc5"},{ "Id": 6, "AccountNo": "10364", "PostingDate": "25.01.2015", "MaturityDate": "31.01.2015", "Description": "description6", "DocumentType": "doc6"}]这是我的角度服务(在单独的文件中):
angular.module("app").factory('myService', function ($http) {返回 {getAll: 函数 (onSuccess, onError) {返回 $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {成功(数据)；}).error(function (data, status, headers, config) {错误(数据)；});}}});这是我的控制器(在单独的文件中):
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({运输: {阅读:功能(选项){url = "/Scripts/app/data/json/master/masterGridData.js",myService.getAll(函数(数据){options.success(数据)；}).错误(函数(数据){选项错误(数据)；})}},架构:{模型: {id: "身份证",字段:{id: { type: "number" },帐号:{ 类型:字符串"}，PostingDate: { type: "string" },MaturityDate: { type: "string" },描述:{ 类型:字符串"}，文档类型:{ 类型:字符串"}}}},页面大小:16});$scope.gridMaster = {列: [{字段:Id"，隐藏:真实}，{ 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" },{字段:描述"，标题:描述"，宽度:170px"}，{ 字段:DocumentType"，隐藏:true }],数据源:$scope.masterDataSource，可选:真，可过滤:真实，可滚动:真实，可分页:{页面大小:16，//刷新:真，页面大小:[50"、100"、200"、全部"]},工具栏:[{名称:创造"}]};});这是我的 HTML:
<头><!-- css 和 javaScript 文件 --><body ng-app="app" ng-controller="myController"><div class="divH3Style"><h3 class="h3LabelForm">Grid Master</h3><div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip"><ul><li>概述</li><li>更新</li><div id="tabstrip-1"><div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource">
<div id="tabstrip-2" style="溢出:隐藏"><div id="tabStrip2Half1"><div class="divHeightStyle"><label for="accountNumber" class="labelTextSize">账号:</label><input id="accountNumber" type="number" class="k-textboxField" name="accountNumber" ng-model="masterDataSource.data.AccountNo" placeholder="账户号"/>