This is a migrated thread and some comments may be shown as answers.

Angular ngmodel binding to objects

15 Answers 364 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
rick
Top achievements
Rank 1
rick asked on 29 May 2014, 04:01 PM
It doesn't appear that the autocomplete supports binding ngModel to objects.  Are there plans to support this feature?  For example, if I configured the autocomplete directive w/ a datasource that is a collection of objects, there is no way that I know of to configure autocomplete where it can bind ngModel to the object that is selected from the result list.  From my experience, the autocomplete directive requires you to specify a data-text-field in this scenario, and the value from the selection is always a string.  Ultimately, what I'm looking for is for the autocomplete to do something like the angular bootstrap typeahead, which can be seen from this plunkr example (See the 'Custom templates' example.  Notice  how the model is actually an object but the input field value comes from the name property of the model):

http://plnkr.co/edit/?p=preview

15 Answers, 1 is accepted

Sort by
0
CS
Top achievements
Rank 2
answered on 30 May 2014, 05:22 AM
I could be wrong but that seems to be the wrong link.
0
CS
Top achievements
Rank 2
answered on 30 May 2014, 05:34 AM
I think I don't fully understand your problem but the dataTextField is only the string notation of an object I think so you could do something like "Person.Name" as well.
0
rick
Top achievements
Rank 1
answered on 02 Jun 2014, 03:08 PM
Hi stefan,  sorry about the link, it'll definitely help give a better explanation of what i'm talking about.  Here's the corrected link...http://plnkr.co/edit/7A5t3UXQUvpImHLmz4g9?p=preview.  In the last text field of the plunker example, if you type in something like 'a', and then select 'Alaska', you will see the model updated to reflect a javascript object being bound to the ngmodel of customSelected, but the text field shows 'Alaska'.  Is there a way to achieve that same result w/ the kendo autocomplete?
0
CS
Top achievements
Rank 2
answered on 02 Jun 2014, 03:44 PM
I think the demos are pretty much the same, the information is in the model as well and also in the dataItem, but the way to reach it is a bit different. you could add a select function to the autocomplete to get some information.

select: function(e){
var dataItem = this.dataItem(e.item.index()),
       grid     = $("#grid").data("kendoGrid"),
       row      = this.wrapper.closest("tr"),
       model    = grid.dataItem(row);
}
http://demos.telerik.com/kendo-ui/autocomplete/template
0
rick
Top achievements
Rank 1
answered on 02 Jun 2014, 04:47 PM
Thanks for the feedback.  Although I understand your suggestion works, I believe it's a workaround.  I have implemented such a solution as you suggest, but I have to create a custom directive wrapper to work around this limitation.  I believe having such ability should be built into the autocomplete directive (most, if not all, angular directives are written to support this capability).  So I was wondering if there are any plans to support such a feature in the near future.
0
CS
Top achievements
Rank 2
answered on 02 Jun 2014, 04:52 PM
I really have very limited knowledge in angular, but maybe this helps a bit.

Angular-Kendo.js / AutoComplete widget
0
rick
Top achievements
Rank 1
answered on 02 Jun 2014, 05:00 PM
No problem Stefan.  Yeah, I have looked at the examples on that site and it wasn't helpful.  If you look the docs for the DatePicker widget, you will see that it supports something like what I'm mentioning, except it uses the k-ng-model for the binding to the date object.  Maybe something like that can be done for the autocomplete.
0
Mihai
Telerik team
answered on 03 Jun 2014, 08:49 AM
Hello,

k-ng-model binds to whatever the widget's value() method returns, while ng-model binds to the input field's value attribute (which is usual with Angular).

Now it happens that AutoComplete's value() method returns the string value of the field.  (See the code, which calls _accessor leading here).  Unfortunately there's no easy fix -- if we make it return the data object instead that would be an incompatible change.

There is a related issue on Github, but I didn't yet decide what's the best fix.  Please feel free to add your voice there.

For the time being, the workaround is to use k-on-select.  The event receives an item from which you can fetch the data object, something like this:

<!-- in HTML -->
<input kendo-auto-complete k-on-select="onSelect(kendoEvent)" ... />

// in controller
$scope.onSelect = function(ev) {
    var item = ev.item;
    var widget = ev.sender;
    var model = widget.dataItem(item);
};

Hope this helps.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
rick
Top achievements
Rank 1
answered on 06 Jun 2014, 02:25 AM
thanks for the response mihai.  yeah, i'm aware that an easy solution doesn't quite exist.  otherwise this would be a non-issue.  just a thought, i noticed in your docs that the kendo ui controls supports mvvm databinding, maybe we can tap into that capability somehow for angular?  here's your demo page that shows this in action:

http://demos.telerik.com/kendo-ui/mvvm/widgets
0
Mihai
Telerik team
answered on 06 Jun 2014, 08:14 AM
Hi Rick,

Kendo MVVM provides overlapping functionality and cannot be used with Angular-Kendo.  On the other hand, even with Kendo MVVM you'd still get in your model whatever the widget's value() returns, which in the case of AutoComplete is just the string contents of the field -- so it wouldn't solve your problem.

Using the "select" event is currently the best solution I can think of.

Regards,
Mihai
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
CCG
Top achievements
Rank 2
answered on 23 Jun 2015, 07:57 AM

Hi. Has this issued been "resolved" in later versions of Kendo UI, i.e. is there a better way of binding the data item to an angular scope than using k-on-select?

0
Accepted
Petyo
Telerik team
answered on 25 Jun 2015, 07:50 AM
Hello,

with the introduction of data-value-primitive concept, this is possible - check an example.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
rick
Top achievements
Rank 1
answered on 25 Jun 2015, 02:22 PM
This is great news.  Thanks
0
Peter
Top achievements
Rank 1
answered on 25 Jul 2015, 12:20 PM

Hi Petyo,

I checked your example and tried to apply it to my use case where a person object references a country object:

var person = { ..., country: { id: 1, name: "Italy" } } 

but this doesn't work. When I instead reference an array like: 

var person = { ..., country: [{ id: 1, name: "Italy" }] }  

then it works (see http://dojo.telerik.com/OQAHE/8) but it does change my model. Can you tell me if there is a solution?

 

0
Petyo
Telerik team
answered on 27 Jul 2015, 08:34 AM

Hello Peter,

the AutoComplete widget always expects an array as the value of k-ng-model, so I am afraid that there is no means to work around that.

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
AutoComplete
Asked by
rick
Top achievements
Rank 1
Answers by
CS
Top achievements
Rank 2
rick
Top achievements
Rank 1
Mihai
Telerik team
CCG
Top achievements
Rank 2
Petyo
Telerik team
Peter
Top achievements
Rank 1
Share this question
or