Search code examples
angularjskendo-uikendo-dropdown

k-ng-model on dropdownlist not binding elsewhere

I am trying to do something that should be fundamental to Angular. I want two controls that are bound to the same scope object to change with each other. In my case the "master" is a kendo-drop-down-list while the "slave" is a small text section that should change value when the dropdownlist changes. What am I missing that I can't get this to work?

I have a kendo-drop-down-list specified on my page via an angular directive. I define the typical 'Name' and 'ID' fields and it displays the dropdownlist just fine using either ng-model or k-ng-model in the html.

<select kendo-drop-down-list
        k-data-text-field="'Name'"
        k-data-value-field="'ID'"
        k-auto-bind="false"
        k-data-source='itemtypesDataSource'
        id="ddxitemtypes" k-ng-model="itemtype" k-value-primitive="false"></select>

I want the selected text of the dropdownlist to show in a different area:

    <small>{{itemtype.Name}}</small>

My understanding of the k-ng-model is it points to the original object and I should be able to use dot notation to specify a field. That is not working. I have tried many different variations and read multiple other postings on here. One of them will show the "ID" field but none show the "Name" field that I desire.

Can anyone shed any light on this issue for me? I am trying to use Angular as it should be and want to avoid using events like 'on-change'. Otherwise why use Angular at all?

Solution

  • It looks like you were on the right track...
    I can't really tell what is wrong from your example. Here is a working example in plunker.
    http://plnkr.co/edit/jVPXWzkeHP9snbas8Kdq?p=preview
    My datasource looks like this...

    $scope.itemtypesDataSource = {data: [
    { ID: 1, Name: 'Basketball' },
    { ID: 2, Name: 'Football' },
    { ID: 3, Name: 'Tennis' }]};

    With HTML...

    <select kendo-drop-down-list
    k-data-text-field="'Name'"
    k-data-value-field="'ID'"
    k-auto-bind="false"
    k-data-source='itemtypesDataSource'
    id="ddxitemtypes" k-ng-model="itemtype" k-value-primitive="false"></select>
    <small>{{itemtype.ID}} </small>
    <small>{{itemtype.Name}}</small>