Typeahead doesn't support two-way data binding fully...
Closed this issue · 12 comments
See the plunkr here: http://plnkr.co/edit/3ryOYo
If the typeahead is to truly use "the same, flexible syntax as the select directive (http://docs.angularjs.org/api/ng.directive:select)" then it needs to support two-way binding via this method.
@Siyfion In reality is more complex than this. The thing is that the typeahead can work with results retrieved from a server and in the case you are binding id only there is simply not have enough info to render input's value.
In the future I'm going to add an option so people can specify a function that would be called on the initial render but for now you could plug into NgModelController#$formatters pipeline.
Anyway, thnx for opening this issue, this is something to be documented at least.
I don't suppose I could get you to elaborate on how the plugging into NgModelController#$formatters pipeline would work?
Any news on this issue since its opening? I started reading about NgModelController but any extra indications would be very much appreciated ;)
@jc-tzn @Siyfion Sorry guys, I kind of missed this one, was working on the positioning issues for the last couple of days.
Coming back to this issue the main trouble is that given an array of objects retrieved from the server, lets say an array of states like this: [{code: 'AL', name: 'Alaska'}] people might choose to bind the code only to the model but still use a more complex expression to render a dropdown's items. This is exactly what is happening in this expression:
typeahead="state.code as state.name for state in states | filter:$viewValue"
Then, when the input content is initially rendered with this binding we've got only state.code but would like to render 'state.name'. But we don't have the state in the model, only its code!
The only solution for this issue I can think of right now is to allow people to specify a function that would be responsible for retrieving the whole object based on a value bound to the model (here retrieving the whole state object based on its code). But then I've realized that such a function is exactly a formatter from the NgModelController: http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController#$formatters Some more info about those in the "Custom Validation" section of this doc: http://docs.angularjs.org/guide/forms
But we've got an additional complexity here as a formatting function must be capable of returning a matching element from a back-end.
Hope that above makes sense and you guys will give it a go and open an awesome pull request. Or you will see that I'm talking rubbish and open an awesome pull request with an alternative solution :-) If not I will eventually go back to this after all the positioning issues are sorted out.
thanks for the quick answer, I had a look at all that but it's kinda beyond my current understanding of angular unfortunately (my brain hurts now) so I'll try to find a simpler work-around to my problem (getting typeahead to work with socket.io) or I'll wait for you to do some of your magic :)
Aaand I found one ! I read the issue about "typeahead on callback" (#252) so I tried using $q and defer and it worked :)
Hey @pkozlowski-opensource I'm taking a bit more of a look at this again now, so regarding your comment about using a formatter to retrieve the related data for the model, how does one go about updating the typeahead's value?
Using your example:
ng-model="userInfo.stateCode" typeahead="state.code as state.name for state in states | filter:$viewValue"
Say I load a model into the userInfo object and it has a stateCode of NY, how would I go about using a formatter to insert the value back into the typeahead? I know that I'm going to need to have a $http.get() request to retrieve the additional information from the server, but after that, I can't see how to force it back in to the typeahead...?
Welcome to every problem I had to deal with while building select2 and ui-select2 (yes, I contributed to both). Perhaps we should make a new native alternative standalone for both of these @pkozlowski-opensource ?
Hello @pkozlowski-opensource I read that this issue is was closed... I've this jfiddle https://jsfiddle.net/qq4gqn6t/12/ but when I change the model the label not change... Can help me?
Thanks
@szaccaria, support-related questions are best suited by posting them to StackOverflow where there's a significantly wider audience to get them answered.
@icfantv I had made a directive... hope that this helps somebody https://jsfiddle.net/qq4gqn6t/91/ and http://stackoverflow.com/questions/35044544/bootstrap-ui-typeahead-doesnt-support-two-way-data-binding?noredirect=1#comment61870083_35044544