AngularJS dropdown multiselect not working - javascript

I wanted to create a simple multi-select dropdown which displays days (mon,tue...sun), select all, unselect all...using angular JS, bootstrap,JS.
I wanted to write controller in a way that if i select monday twice, it de-selects and remove it from the selected items....instead it is keep on adding the elements again and again...and unselect all is not working.
I tried every other way and couldn't succeed. Plz help me or share any similar code that can give me a idea.
PS: I don't want to use jQuery for this.

Check out the following:
https://github.com/sebastianha/angular-bootstrap-multiselect
OR
http://dotansimha.github.io/angularjs-dropdown-multiselect/#/
The second link seems to be exactly what you are looking for.

Related

How to make Searchable Dropdown like this with Javascript or jQuery?

How to make searchable dropdown in html using any library or simple javascript like this? Because this searchable dropdown is very elegant.
you can use jqueryui combobox auto complete plugin as well, the link below gives the functionality and below fiddle also gives a working code
You can try Chosen. This plugin contains the element which you want. It is simply jQuery plugin with advanced options.
Thanks.
My bet is Select2 which can be customised to the extent you want and is easy to learn and use... It also has support for call back function like integrating user input if not present in dropdown.

Replacing a dropdown on a form with another one

I have a form that has a drop-down of dates. What I want to do is for the dates to not appear until another drop-down has an option selected because this other drop-down will determine what dates show and what ones don't.
I have created two drop-down menus one without the dates that will display until the other drop-down has an option selected and another with all of the dates in. How can I get this one to appear exactly where the one without the dates was?
I am a novice when it comes to jQuery and JavaScript I have tried a couple of basic things but it doesn't seem to be working.
Can anyone help me please?
You can use jQuery change event
$("#form").change(function() { // some logic here });
Here is jsfiddle demo http://jsfiddle.net/a92b40w9/
Here you can get some smart stuff about events in jQuery https://api.jquery.com/category/events/ pay attention to those associated with form and input

Create Bootstrap dropdown from input[type="text"]

Using this example i create dropdown Bootstrap example
But for my case it will be better to have some input[type="text"] instead of button. Because i want to show what i choose in dropdown?
Is there any solution?
First what come to my head to add js-click which will change text of button.
If you want a dropdown that behaves like an html select element you can look here
http://silviomoreto.github.io/bootstrap-select/
Better take a look at jQueryUI autocomplete.
http://jqueryui.com/autocomplete/
I dont think bootstrap provide anything like this so far.

How to use jsviews to render a a multiple selection listbox

I have an object, that describes an application and one property can have several values from a list. I am using JSRender and JSViews for the databinding, I'm getting pretty good with the rendering part and I still have a lot to learn on JSViews.
I have several dropdowns in my application where the correct value is selected but I don't see how I can databind with several values inside a list box.
I created a JSFiddle to demonstrate the concept but again, I have a problem, my fiddle seems to work only when I am logged in, I gave it a name, I can see it in my public fiddles but, when connected as a Guest, I can see the code but it doesn't seem to run.
Here it is: [http://jsfiddle.net/ClaudeVernier/73pyx/]
If you could help me getting this work where the listbox is in the Red rectangle with IDs 100 and 200 selected, that would help me a lot, next, if anyone could suggest a way to have the same thing but we checboxes next to each item in the list box, it would be perfect !!!!
I think it exists as a JQuery plugin but I am not sure, if anyone has experience of such plugin and making it work with JSViews... it would be a dream... :-)
Thanks for any help,
Claude
In your jsfiddle, you are using render(), not link() so in effect you are using just JsRender, not JsViews, and you won't get JsViews data-binding.
Did you see this sample: http://www.jsviews.com/#samples/tag-controls/multiselect? It shows a multiselect listbox using JsViews.

Multiple selection in Bootstrap typeahead

I'm looking for a proper way to implement the jquery mobile filter list in bootstrap typeahead component.
The functionality that I needed is here in the following link. Please scroll down to the bottom. http://jquerymobile.com/demos/1.2.1/docs/lists/lists-inset.html
In the filtering list, I want to add checkboxes for each list items and the user should be able to check multiple value. They don't have to be added to the textfield. As that's the only function I need, its no use of adding the whole jquery mobile library to the project.
I found couple of options in the following link which goes near my requirement.
http://fusiongrokker.com/post/heavily-customizing-a-bootstrap-typeahead
But, the multiple selection by clicking checkboxes didn't work with bootstrap typeahead.
Can anyone give me a good solution for this.
Thanks
If you looking for bootstrap, this plugin can be used in your project
https://sliptree.github.io/bootstrap-tokenfield/
I saw following has been suggested in many places:
http://ivaynberg.github.io/select2/
(If you use the multi-value version.)

Categories