לאחרונה נתקלתי בבעיה ב- combobox של kendo באמצעות angular

    יש בעמוד combobox לבחירת עיר ו- combobox לבחירת רחוב

    ואני רוצה שרק אחרי שהמשתמש בוחר עיר ב – combobox הראשון,

    ה- combobox של הרחובות ירוץ לשרת להביא את הרחובות של העיר הספציפית,

    ב- combobox של הרחובות,  מוגדר k-auto-bind=false שמונע את הריצה לשרת באופן אוטומטי,

    באופן תאורטי זה אמור לעבוד,

    אבל במציאות התבצעה פניה לשרת כשהעמוד נטען, גם ללא בחירת עיר

    הקוד נראה ככה

    HTML

    Code Snippet
    <body ng-app=”myApp”>
        <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

    Code Snippet
    angular.module(‘myApp’, [“kendo.directives”])
        .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

    כך נראה הקוד אחרי התיקון

    Code Snippet
    <body ng-app=”myApp”>
        <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>