I'm using angular bootstrap typeahed.
It's possibility to display not-full word in input with blur, like in https://twitter.github.io/typeahead.js/examples/ ?
I try do this in ui.bootstrap-typeahed, but I have only typed chars.
I use $http request to get elements for data.
Thanks for any idea.
Found the answer in the typeahead documentation. Typeahead fills the input with the selected or autocompleted value on blur. To avoid this, $('#selector').typeahead('val', '<contents>') should be used instead of $('#selector').val('<contents>').
Related
Trying to dynamically add validation to input file if I choose first option from select. But if I add required attribute, it still ng-valid in class. If I load file to input file, it still ng-empty.
What's wrong? http://plnkr.co/edit/pjyCULes60jWf7yqNsyB?p=preview
The form validation in AngularJS depends on the ngModel attribute, which doesn't work with input type=file.
To solve this, either use ngFileUpload which helps you solve other problems you'll encounter with file upload in Angular as well, or see this or that answer.
Im working with angularjs/1.3.6 and v0.10.0/angular-material.js with a md-select field with name="txtGenero" but when the form have been Submitted with ajax the md-selected has a dot at beginning of name field like '.txtGenero' in the image below.
https://plus.google.com/photos/+TommyHern%C3%A1ndezA/albums/6175087393788917697/6175087392180342338?pid=6175087392180342338&oid=118016940134163401130
I hope can help me thanks.
I don't exactly know why the ngFormController has the .txtGenero field.
However you should use ngModel to bind your form fields to a model and post that model, not the form controller itself. You can use angular.element.param($scope.registro) to get the the fields from your model as form data.
You don't need jQuery for any of it.
Updated plunkr: http://plnkr.co/edit/IFOsFgiQBo7vJVzkBxaf?p=preview
(I updated to angular-material master)
Try to provide your code well formatted, this is kind of a mess to work with.
I am using the angular-ui-select directive to create an auto-complete input field. I want to be able to click and focus the field without the dropdown options appearing. The Plunker example in the documentation works this way, but I cannot get mine to behave correctly. Please help.
Here is my code:
<ui-select ng-model="customer.selected" theme="bootstrap">
<ui-select-match placeholder="Start typing..">{{ $select.selected.family_name }}</ui-select-match>
<ui-select-choices repeat="customer in customers | filter: $select.search">
<div ng-bind-html="trustAsHtml((customer.family_name | highlight: $select.search))"></div>
</ui-select-choices>
</ui-select>
Here is their Plunker example that is working the way I would like it to.
http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview
I have a same issue. I want to be able to click and focus the field without the dropdown options appearing.
Here I am sharing my solution. May be it will help someone. I made changes in Selectize theme example in plunker shared by #Corey Quillen. I had cleaned up other things so it will help.
1) Here first I had add reset-search-input="false" in ui-select directive. So it will not reset search input.
2) Then I had replaced filter with custom filter propsFilter. Which is already useing in Select2 theme. And put
if(!props.name.length){
return out;
}
in filter above If condition. In demo.js file.
So data return empty if no search text entered.
Here is the plunker example of that.
ui-select by default shows a dropdown, I dont think we can change that. But you can change its binding data. In the plunker example the ui-select is bind to model 'address.selected', which initially is empty, thus nothing pops up. But once you start typing the refresh will call the function refreshAddress() to populate the results into address. Once the results are populated, ui-select finds that its model(address) has data and start showing a dropdown. After you have searched for something, try to click on the textbox, it will still show you the result, beacuse they are still present in the model.
Since, you are trying it with a local variable I suppose, it is pre-populated with data for ui-select and hence it shows it. I think you should try to make a request in you code to get that data and use refresh and refresh-delay. If you dont have a web service and want to use local data, I would suggest bind the select to an empty model and put data into that using a custom function for refresh, you might have to write a custom search functionality into the refresh function, but you can use javascript's search() or indexOf() for that.
How can I implement typeahead like functionality (autosuggestion), keeping the nice "material design" in AngularJS (https://material.angularjs.org)
You cans Autocomplete field.
The documentation is at
https://material.angularjs.org/latest/demo/autocomplete
This is possible using Autocomplete in Angular Material; however it is not immediately obvious from the documentation.
The demo only matches characters at the beginning of the result due to specifying the caret flag, ie: md-highlight-flags="^i"
To allow autocomplete to find any matching characters you should use the global flag, ie: md-highlight-flags="gi"
You will also need to change the state.value.indexOf(lowercaseQuery) === 0 line in the filterFn function to state.value.indexOf(lowercaseQuery) !== -1
Check this codepen for a working example:
http://codepen.io/DevVersion/pen/KrOYoG
Is there a way to require that the user only enter a value which matches one of the values in the ng-options array, similar to a select element? I guess I'm looking for a combination of typeahead and select. The Chosen javascript plugin does this but I have had issues with that plugin with AngularJs 1.3.