Kendo UI 和 AngularJs：当用户在网格中 select 行时如何在文本框字段上绑定数据

Question

我正在使用 Kendo UI 和 angular 网格应用程序。在我的应用程序中，我定义了 Kendo TabStrip。在第一个选项卡中，我有 Kendo UI 带有数据的网格，第二个选项卡包含适当的文本框字段，当用户 select 网格中的某行时将填充这些字段。我的网格在加载页面时填充了数据并且它工作正常，但数据绑定到文本框字段不起作用。当用户在网格中 select 行时，如何在文本框字段上绑定数据？

这是我的 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 服务（在单独的文件中）：

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);
          });
      }
  }


});

这是我的控制器（在单独的文件中）：

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" },
                DocumentType: { type: "string" }
            }
        }
    },
    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: "DocumentType", hidden: true }
    ],
    dataSource: $scope.masterDataSource,
    selectable: true,
    filterable: true,
    scrollable: true,
    pageable: {
        pageSize: 16,
        //refresh: true,
        pageSizes: ["50", "100", "200", "All"]
    },
    toolbar: [{
        name: "create"
    }]
};


});

这是我的 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="masterDataSource.data.AccountNo" 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="masterDataSource.data.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="masterDataSource.data.Description" />
                                </div>
                                <div class="datepickerStyle">
                                    <label for="maturityDate" class="labelTextSize">Maturity Date:</label>
                                    <input id="maturityDate" class="k-datetimepickerMaster" name="maturityDate" ng-model="masterDataSource.data.MaturityDate" />
                                </div>
                            </div>
                            <div id="tabStrip2Half2">
                                <div class="divHeightStyle">
                                    <label for="documentType" class="labelTextSize">Document Type:</label>
                                    <input id="documentType" type="text" class="k-textboxField" name="documentType" placeholder="Document Type" ng-model="masterDataSource.data.DocumentType" />
                                </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>

任何帮助都会非常有用。

Answer 1

我正在解决这个问题。我在 $scope.gridMaster:

中添加了更改事件函数

$scope.gridMaster = {
    ...
    change: function () {
        var dataItem = this.dataItem(this.select());
        $scope.accountNumber = dataItem.AccountNo;
        $scope.postingDate = dataItem.PostingDate;
        $scope.description = dataItem.Description;
        $scope.maturityDate = dataItem.MaturityDate;
        $scope.documentType = dataItem.DocumentType;
    }
}

我正在 HTML 页面中更改 ng-model：

<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>
                                <input id="documentType" type="text" class="k-textboxField" name="documentType" placeholder="Document Type" ng-model="documentType" />
                            </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>

Kendo UI 和 AngularJs：当用户在网格中 select 行时如何在文本框字段上绑定数据

Kendo UI with AngularJs: How to bind data on textbox fields when user select row in a grid

javascript

angularjs

kendo-ui

kendo-ui-grid