I have an input which uses typeahead but the placeholder is not being rendered. What should I do to make it show the placeholder?
I'm using "angular-bootstrap": "~0.14.0"
<input type="text" name="scheduler_name"
ng-model="appointment.scheduler_name" uib-typeahead="scheduler.name as scheduler.contact_info for scheduler in findSchedulerByName($viewValue) | limitTo:7"
typeahead-loading="loadingSchedulers" typeahead-no-results="noResults"
typeahead-on-select="setSchedulerAttributes($item, $model, $label)" class="form-control input-lg"
placeholder="(Name, Carrier, Broker or Phone)" server-error>
Screenshot:
I'd recommend stripping down your typeahead to see where the problem lies. Start with the barebones typeahead:
<input type="text" name="scheduler_name" ng-model="appointment.scheduler_name"
placeholder="(Name, Carrier, Broker or Phone)"
uib-typeahead="scheduler.name as scheduler.contact_info for scheduler in findSchedulerByName($viewValue) | limitTo:7"
See if the placeholder displays as it should. If not check to make sure you actually have a falsy value for the ng-model value.
If it does display then chances are some of the other typeahead-related directives are overwriting it. My best guess is that typeahead-no-results="noResults" or something related is triggering and causing it to set the placeholder to "".
Related
I am working on an Angular application that uses uses bootstrap typeahead on a text box. When I click inside the textbox, all the values are displayed in a dropdown. I have over 1000 items to search through and there is a delay from when the users clicks inside the textbox and when they are able to type. How can I disable the values from popping up once the textbox is clicked? Here is my HTML code
<input id="filterValue1"
class="form-control input-sm" type="text"
ng-model="modalCriteria.filterValue1"
uib-typeahead="option.value as (option.valueDescription) for option in valueSetOptions | filter:$viewValue | limitTo:1500"
placeholder="Select a value"
typeahead-min-length="0"
typeahead-editable="true"
>
If you want to wait until they actually start to enter a text value, and not just open it when they click on it, you can change the typeahead-min-length.
By default it is '1', which means it will only start looking for matches when '1' character has been entered into the input. So in this case, removing it completely will work for you.
<input id="filterValue1"
class="form-control input-sm" type="text"
ng-model="modalCriteria.filterValue1"
uib-typeahead="option.value as (option.valueDescription) for option in valueSetOptions | filter:$viewValue | limitTo:1500"
placeholder="Select a value"
typeahead-editable="true">
Also, setting it to typeahead-min-length="2" will restrict it even more, since it will only start matching on 2 characters, dramatically filtering out a large dataset.
I am trying to use angular typeahead.
Its loading my complete data but not showing the line items.
This is my code.
<input type="text" ng-model="selected" typeahead="item as item.entityName for item in testsList |filter:$viewValue" class="form-control" placeholder="Start typing to search tests and select it">
My ui.bootstrap version is ui-bootstrap-tpls-0.2.0
Hope somebody will come up with relevant answer.
I have attached the concerned screenshot of the out.
I am using angular-unsaved Changes directive as well as the angular built in form controller to detect if a form is $dirty.
I have a form on a specific page that even though I edit elements, the form never registers as dirty. I have gone so far as to strip everything and leave only:
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" id="thematiff" class="form-control" >
</form>
The formis never $dirty even when I change the value of the input. Any ideas what the problem could be causing the changes to input not to be detected? Is it that there should be an angular input equivalent tag instead of a plain old "input"?
What could be disabling the detection?
Ng-model is missing on your input field.
Validations and all form enhancements are provided by utilizing ng-model directive (and its controller). So add ng-model and everything is Ok.
See: http://jsbin.com/podepo/edit?html,output
<form unsaved-warning-form class="form-horizontal" name="WHAT">
<input type="text" name="thematif" ng-model="whatever" >
<pre>{{WHAT|json}}</pre>
</form>
I have a situation where I need to escape the following string to be used as the preloaded value for an input field. I would usually use data-bind-html but this doesn't show in the input box.
Here is my string:
"Website Design & Development"
and currently my input field is as follows:
<input class="form-control" type="text" ng-model="group.name" required>
When I use mg-model, it populates the input form value fine, but when I use the following:
<input class="form-control" type="text" ng-bind-html="group.name" required>
Am I doing this correctly or can someone see where I am going wrong? I would ideally like a way to escape the html entities in the controller before it gets shown in the view but I am not sure if this is possible?
Thanks
I have a form that POST all data that is entered, when saving. But when I refresh the page, not all entries are bound to their respective input fields.
It is a bit strange because I am using ng-model on all the fields.
Here is an example of what doesn't bind:
<input name="full_name" ng-model="user.full_name" type="text" required></input>
and here is one that does bind:
<input name="address" ng-model="user.address" type="text" required></input>
Has anyone run into this issue, or notice something I may be missing?
It could be the browser remembering your last input in the forms. So after refreshing, the browser pre-populates the form and angular doesn't update the scope. There is a Google Groups thread about that. The best solution I found is to add autocomplete="off" in the inputs of the forms. Because after refreshing, there is no way angular could be remembering your last input in the form, unless you are using cookies for that wich you are obviously not.