0
Ich arbeite mit Kendo UI und angular Grid-Anwendung. Mein Gitter aus JSON Daten gefüllt (separate Datei) und ich bin Winkel Service nutzen:Wie man einen Fremdschlüssel bindet kendo ui Dropdownliste (mit Winkel)
Meine JSON-Daten:
[
{ "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 }
]
Mein Angular Service:
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);
});
}
}
});
Das ist mein Controller ist:
Dies ist mein JSON, der Daten für documentType enthält:
[
{ "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" }
]
Und das ist mein 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>
In HTML Ich habe Dropdownlist, die Daten für document und meine Dropdownlist enthalten ist, mit JSON Daten gefüllt. Aber das Problem ist bindend. Wenn ich eine Rasterfeld-Dropdown-Liste auswähle, wird immer das erste Element angezeigt. Meine Raster-Datenquelle enthält einen Fremdschlüsselwert (documentTypeId) und dieser Wert sollte mit dem Id-Wert aus der JSON-Datei documentType übereinstimmen, dh $ scope.documentType-Eigenschaft dataValueFiled-Wert. Wie kann diese Dropdown-Liste gebunden werden? Pls helfen ..