current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite
1

I have a problem with UI bootstrap Typeahead. Here is plnkr, and explaination is below.

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

I would like to be able to select one state from the states listed by Typeahead, but also to be able to create new state in the same form, with properties name and flag by writing state name that doesn't exist.

Everything works as expected when you select a state from Typeahead. You select whole object, properties "state" and "flag" gets selected too. The problem occurs when you write a string that doesn't match any of those options listed in Typeahead. Let's say you want to make state "myState" Then the ng-model is string and not object like it is when you select one option from typeahead and it is not possible to enter flag property because you can't create property on string.

Is there any way that I can change uib-typeahead settings or change ng-model somehow, make some function that changes ng-model from string to object, or something like that?

<input type="text" ng-model="customPopupSelected" placeholder="state" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">

<input type="text" ng-model="customPopupSelected.flag" placeholder="flag" class="form-control">

Here is simplified explaination of what I am trying to acheive. When I select state from Typeahead, state looks like this: 

state = { 
  "name": "Arizona",
  "flag": "9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png"
}

When i start typing and type a state that doesn't exist state is a string.

state = "myState"

so I am not able to add new "state.name", and then add "state.flag" property to state object. So I would like to get around this somehow and be able to make my own states if it is even possible.

state = { 
  "name": "myState",
  "flag": "mystate-flag.svg.png"
}
share|improve this question
up vote 0 down vote

Add typeahead-editable="false" with Uib-typeahead

<input typeahead-editable="false" type="text" ng-model="customPopupSelected" placeholder="state" uib-typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-popup-template-url="customPopupTemplate.html" class="form-control">

<input type="text" ng-model="customPopupSelected.flag" placeholder="flag" class="form-control">

I hope this will help you.

share|improve this answer
    
This is not what I intended. Maybe my explaination wasn't good enough. I will try to explain better then, – Darko Jukić Jan 24 at 15:10
    
us per description in type-ahead if enter char not found then it's not return object it return string but after the use of given condition it retun null if you not select suggest item in list or not found – Manoj Patidar Jan 24 at 15:41
up vote 0 down vote

you can add a $scope.$watch:

// listen to customPopupSelected variable changes
$scope.$watch('customPopupSelected', function (nVal) {
  // enter this block only if new value is not an object
  if (nVal && angular.isString(nVal)) {
    // convert customPopupSelected from a string to desired object
    $scope.customPopupSelected = {
      name: nVal,
      flag: 'URL-TO-SOME-DEFAULT-FLAG'
    };
  }
});

here is your updated plunker: http://plnkr.co/edit/jezOW8SEJUh59CzwFpr8?p=preview

share|improve this answer
    
This is good solution, thank you. – Darko Jukić Jan 25 at 6:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.