יוסי הרטמן
yosef@haravdotnet.co.ilלאחרונה נתקלתי בבעיה ב- combobox של kendo באמצעות angular
יש בעמוד combobox לבחירת עיר ו- combobox לבחירת רחוב
ואני רוצה שרק אחרי שהמשתמש בוחר עיר ב – combobox הראשון,
ה- combobox של הרחובות ירוץ לשרת להביא את הרחובות של העיר הספציפית,
ב- combobox של הרחובות, מוגדר k-auto-bind=false שמונע את הריצה לשרת באופן אוטומטי,
באופן תאורטי זה אמור לעבוד,
אבל במציאות התבצעה פניה לשרת כשהעמוד נטען, גם ללא בחירת עיר
הקוד נראה ככה
HTML
<div ng-controller=”myCtrl”>
<div class=”col-md-8″>
<select kendo-combo-box
k-data-source=”cities”
ng-model=”address.City”
data-text-field=”‘Name'”
data-value-field=”‘Id'”></select>
<br />
<select kendo-combo-box=”acStreets”
k-options=”acStreetsOptions”
ng-model=”address.Street”
k-auto-bind=false
data-text-field=”‘Name'”
data-value-field=”‘Id'”></select>
</div>
</div>
</body>
javascript
.controller(‘myCtrl’, function ($scope, $http) {
o = $scope;
$http.get(‘/Address/GetSities’).success(function (res) {
$scope.cities = res;
})
$scope.$watch(‘address.City’, function (newVal, oldVal) {
if (newVal == oldVal || newVal == “”)
return;
$scope.acStreets.dataSource.read();
});
$scope.acStreetsOptions = {
filter: “contains”,
dataSource: {
serverFiltering: false,
transport: {
read: {
url: ‘/Address/GetStreets’,
},
parameterMap: function (data, type) {
if (type == ‘read’) {
data.City = $scope.address.City;
}
return data;
}
},
}
}
});
הבעיה היתה ש-ng-model מכניס ערך ל- combobox והערך הראשוני הוא null מכיוון שלא נבחרה עדיין עיר,
ומבחינת kendo ברגע שהוא קיבל ערך, הוא רץ לשרת גם אם מוגדר autoBind=false,
הפתרון:
להחליף את ng-model ל-k-ng-model שמחזיר את כל האוביקט
ולהוסיף data-value-primitive=true, כדי לקבל רק את ה- Id
כך נראה הקוד אחרי התיקון
<div ng-controller=”myCtrl”>
<div class=”col-md-8″>
<select kendo-combo-box
k-data-source=”cities”
ng-model=”address.City”
data-text-field=”‘Name'”
data-value-field=”‘Id'”></select>
<br />
<select kendo-combo-box=”acStreets”
k-options=”acStreetsOptions”
ng-model=”address.Street”
k-auto-bind=false
data-text-field=”‘Name'”
data-value-field=”‘Id'”
data-value-primitive=”true”></select>
</div>
</div>
</body>