I have an Angular model ng-model="car" I am trying to create a dropdown list, and would like the list items to be populated from objects in the model. I am trying to do this all in the HTML (since it is Angular).
Any thoughts?
If you want a form input: http://angular-ui.github.com/#/directives-select2
If you want a dropmenu: http://angular-ui.github.com/bootstrap/#/dropdownToggle
Checkout the dropmenu source code too to get an idea of how to go about doing it if you rather code up your own solution.
Essentially AngularJS makes it so easy that the ONLY thing you really need to do is toggle the visibility of a DOM element and use some fancy css.
Checkout this example of using pure AngularJS + AngularUI (when necessary) alongside Bootstrap's CSS to create dropmenus (and other widgets) http://plnkr.co/edit/gist:4464334?p=preview
Related
I have used FullCalendar inside my angular application. I have created a reusable component using the FullCalendar and use it like this,
<app-full-calendar
[building]="selectedBuilding"
[newEvent]="newEvent"
(clickedEvent)="clickedEvent($event)"
(clickedDate)="dateClicked($event)"
[updatedEvent]="updatedEvent"
[deleteEvent]="deletedId"
></app-full-calendar>
when ever necessary.
The issue is there are custom styling necessities such as changing the cursor of events. In order to achieve this, I have to add custom styles inside the component. But so far I was not able to find any solution.
I need to have an input field with an arrow on the right so when I press on the arrow I have the bahaviour of a select tag ( a dropdown list of options). I was wondering if it's possible to do this in HTML/Angular 6... I found the solution of a datalist but it's not actually the result I'm looking for because with this solution if I enter some value in the input, which is not present in the datalist, and then click on the arrow anything display because datalist filters what to display depending on the input value.
Hope it's clear enough.
Taking account that you can use a library or an UI framework, I suggest you the following options:
Angular Material Select Component
The google's UI framework to Angular applications.
Pros: Acessbility and responsivity are concerns of the framework, easy integration with Angular
Cons: The values of select can't be filtered
https://material.angular.io/components/select/overview
Angular Material Autocomplete component
Another component of google's UI framework. It's not a pure select, but it can be adapted as a combobox with filtering.
Pros: Acessbility and responsivity are concerns of the framework, easy integration with Angular
Cons: As it's not a pure select component, so maybe you would have to adapt it.
https://material.angular.io/components/autocomplete/overview
is there any ready widget like that?
If not, can I combine the dijit filteringSelect with dojox multichecked?
if not, is it easy to create one of my own or has any one started doing this? it's so necessary for my project.
There is no widget like that as far as I know (the multichecked widget itself is not even a standard widget, since it's a part from DojoX).
About your question of combining both. I don't think that will be easy, because the dijit/form/FilteringSelect does not use a <select> as widget and I don't think they're made to be ran together.
And the answer to your last question: it all depends on what functionality you exactly need. A dijit/form/FilteringSelect only allows you to select 1 value (it's a textbox with a dropdown in fact, and a textbox can only have 1 value).
If you want to create a variant with radio buttons, then that is possible, but it is not an easy job. The multichecked is working with a simple DOM node, however, the dijit/form/FilteringSelect offers a lot more things like autocomplete, stores, ... . To make your widget work, you need to listen to all these events and adapt yuur radio buttons to it.
I made a simple example that is only displaying radio buttons for each item in the filtering select, the code can be seen at JSFiddle. However, it does not react to changes, that's a part that you will have to implement.
I have this problem, in a form I have a list of customers that could be more than 300 and, for me, it isn't very simple find over there because I should scroll all results for find a single row!
On the old technology I had a button that opened a pop up where I should research which customer I should select and than I used a javascript for recording the selection on the first form, but It could be a good solution with new technology!
How can I resolve this doubt? What is the best solution for big <select> tag?
You basically want an autocomplete dropdown list. This does not exist in the standard JSF component set and it is also not exactly trivial to implement with JavaScript/jQuery on top of the standard JSF component set because the available values have to be present in the server side's state. You also basically want a dropdown list which is represented by a <div><input><ul><li> instead of a <select><option> because a normal <select> doesn't allow the enduser to type text in. The standard JSF component set does not have a component which renders the desired HTML markup. You'd basically need to create a custom JSF component.
There are 3rd party JSF component libraries which already offer a fullworthy JSF autocomplete dropdown list. It would be easier to use either of them instead of reinventing the wheel by a custom JSF component. Take your pick:
PrimeFaces - the <p:autoComplete> component
RichFaces - the <rich:autocomplete> component
OpenFaces - the <o:suggestionField> component
ICEfaces - the <ice:selectInputText> component
you can try jquery ajax autocomplete
Refer to:
http://docs.jquery.com/Plugins/Autocomplete
http://jqueryui.com/demos/autocomplete/
Yes, the jQuery autocomplete plugin is the best solution for you while you have a large number of items.
By the way, imagine that you would like to select an item with specific letters. While you are using drop down lists, you can point to your wanted items by typing their names from the first letter of each one. But using jQuery autocomplete, you can search a string or a group of letters in everywhere. it does not matter if are your inserted letters located at the first of your item names or in other places.
As ShantanuD said, you can find this plugin in http://jqueryui.com/demos/autocomplete/
I have tried searching for this but I do not know the name of the control or UI so I am not having any luck. I'd like to know if there is a name for this UI and if you know of a good link to sample html that would be ideal.
It will be used inside of a jQuery UI dialog box as well as on a standard page within a web app.
Thanks!
You need to use a two-sided multi-select list...
The jQuery two-sided multi-select list converts a normal drop down list into the mock-up you've posted and automatically moves selected items over to the right-hand list as well as adding buttons for movement (plus you can double-click items to move them back and forth).