I'm building a search feature that needs to use a typeahead that will suggest results from multiple datasets of different type of items.
I have used the Angular UI Bootstrap's typeahead directive for a single data. The documentation mention custom templates, but nothing about supporting grouping of results.
For example, I would like to be able to type in "san" and see results for people and cities, with group labels:
Cities
San Francisco
San Diego
People
Santana
Sanchez
Sandip
Is this possible using Angular UI Bootstrap's typeahead?
Found this discussion very helpful to set me on the right track:
AngularUI Bootstrap Typeahead Grouping Results
The overall approach is to:
add a "data type" identifier to each set of results
merge data sets together
during filtering, identify the first item of each data type.
a custom typeahead template, look for the "first" identifier, and include additional HTML to label the section of results
Related
My current scenario is i query a service and bring an array of values and display it in dropdown in AngularJS using ng-options. The problem is i need a default value at the top of the dropdown somthing like "Select from the list".
I have done that using
<option value="">Select from the options</option>
the problem is i also need to persist the data when i select suppose first value in the dropdown and go to some other page for sometime and come back to the same page which has that dropdown. That time i again need to see the first item selected and not the "Select from the options" thing.
How can i add this text "Select from the options" to the array which comes after querying a service and populates the dropdown also maintaining the persistence using ngModel.
Thanks,
MK
Assuming that the "other page" is still in the same (single-page) Angular application, you can store the selection in a factory and when you come back to the page, initialize the ngModel object (in the controller) by reading it from the factory. There are many ways, but this is one of the usual basic patterns in Angular.
If the visit to the "other page" causes Angular to be reloaded, one typical approach is to store the settings in local storage.
I've been looking over the Angular Schema Form documentation to be able to apply attributes to the elements generated at: https://github.com/Textalk/angular-schema-form/blob/development/docs/index.md
Have been looking up and down and have found nothing. I see through defining the schema that you can define custom HTML classes:
htmlClass: "street foobar", // CSS Class(es) to be added to the container div
fieldHtmlClass: "street" // CSS Class(es) to be added to field input (or similar)
labelHtmlClass: "street" // CSS Class(es) to be added to the label of the field (or similar)
But, haven't been able to find where I can apply attributes like the data attribute or an attribute specific to the element itself. Any resources in regards to this type of basic functionality you'd expect from form generation?
Any ideas?
Thanks!
I do not think this is possible to do purely through json schema definitions, you would have to extend Schema Form and provide your own HTML template with your custom attributes. I've had this problem myself and have had to do the very same.
I'm sure you've seen this but here's the docs on extending:
https://github.com/json-schema-form/angular-schema-form/blob/master/docs/extending.md
The issue is best illustrated in the plunker - http://plnkr.co/edit/9DYQ3rlmiMK9bdtjyYOA.
Basically, I am trying to create a meta form rendering engine using angular with the help of directives that handle interpretation of data runtime and render the fields accordingly.
Please let me know if you have any ideas why the dyn-ng-repeat directive is not rendering the three URL fields under the user object as expected in the code below -
<div dyn-ng-repeat="item in {{field.model}}">
<div ng-repeat="field in field.children" ng-include src="'field.html'">/div>
</div>
Thanks.
EDIT:
Hi guys, I have created a full Plunker here - http://plnkr.co/edit/cFreJZbluy3w4R9PZUCD?p=preview that should have all the code necessary but not working.
Basically, there is a hierarchy of objects. Social Networks have URLS and a list of Friends. The code is supposed to display three social networks and each should have two friends listed under them. The button 'Add Network' should add another social network to the list and the button 'Remove Network' should remove the respective network associated with it along with all its children. Similarly, 'Add Friend' should add a new friend object under that Social Network and 'Remove Friend' should remove the respective friend from under that network.
It's a bit complex, but if you look at it for a couple of minutes, you'll get the idea of what I'm trying to do here. It's dynamic DOM based on the data elements that are bound two way.
Thanks.
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.
I am using angular UI bootstrap type-ahead directive for type-ahead in a form
http://angular-ui.github.io/bootstrap/
I am fetching the records from remote server via $http service. It is working fine.
However I can select only one element from list at a time.
I want to select multiple values from the list and show all currently selected element in input field with a remove button just like tags for SO. The selected tags are stored in angular array model.
How to achieve this ?
I have read documentation for Angular UI bootstrap but I am not able to find anything.
This guy made a directive for this. Should do exactly what you want and it's even using the ui-bootstraps typeahead.
https://github.com/mbenford/ngTagsInput
The best solution I have found so far is io.select
it does exactly what you require, multi-select typeahead.
and the markup is neat and clean too e.g:
<oi-select
oi-options="list.id as list.description for list in lists"
ng-model="tags"
multiple
placeholder="Select">
</oi-select>
This component is also compatible with bootstrap and the new bootstrap 4.
In js file :
To list all selected items, use $item with typeahead-on-select and push to an array for ex.evtMem. delete fn to delete selected item.
HTML :
Use table to list all array values using ng-repeat. Addition to that add remove glyphicon image and function to delete corresponding item.