javascript - 如何绑定(bind)外键kendo ui dropdownlist(带 Angular )

Question

我正在使用 kendo UI 和 Angular 网格应用程序。我的网格由 JSON 数据(单独的文件)填充，并且我使用 Angular 服务:

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


});

这是我的 Controller :

    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>

在 HTML 中，我有包含 documentType 数据的下拉列表，并且我的下拉列表填充有 JSON 数据。但是，问题在于绑定(bind)。当我选择某些网格行下拉列表时始终显示第一项。我的网格数据源包含外键值 (documentTypeId)，该值应与 documentType JSON 文件中的 Id 值匹配，即 $scope.documentType 属性 dataValueFiled 值。如何绑定(bind)这个下拉列表？请帮忙..

Answer 1

为了解决这个问题，我使用硬编码变量:

$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.documentTypeDS。