Advanced Search with filter - Angularjs - javascript

I'm trying to create a advanced search with a specific filter.
Currently when using the filter option, everything gets searched, but I want to have it more specific.
I want to create a dropdown that gives you the option to search through the names or places instead of searching through all the results:
<form class="input-group col-md-4 form-inline">
<input type="text" class="form-control" placeholder="Search captures" ng-model="search"/>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Options <span class="glyphicon glyphicon-cog"></span> </button>
<ul class="dropdown-menu">
<li><input type="radio" name="searchoption" value="All" id="All" checked><label for="all">Search through all</label></li>
<li><input type="radio" name="searchoption" value="Birdname" id="Birdname"><label for="birdname">Search by birdname</label></li>
<li><input type="radio" name="searchoption" value="Place" id="Place"><label for="place">Search by place</label></li>
</ul>
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"> </span></button>
</span>
</form>
Depending on the selected radiobutton, I want the filter.search to change:
<li ng-repeat="capture in captures|filter:search:strict|orderBy:'created_at':true|startFrom:currentPage:10" class="masonry-item clickable">
So basicly I want the user to be able to select a specific radio button, and depending on what he picks, it'll search a specific result.
In the Angular documentation it states that my ng-model on my search input has to be one of the following:
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.$>
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.birdname">
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.place">
Though is there a specific way I can change those, depending on the radio button checked?
Hope this is clear.

Few changes:
Change ng-model for input to search[searchBy]
<input type="text" ng-model="search[searchBy]">
Set same ng-model equals to searchBy for all radio buttons and set the value as per search by condition like $ for all, birdName to search in birdName property of the object that is stored in captures that you are trying to filter out.
<li><input type="radio" name="searchoption" ng-model="searchBy" value="$" id="All" checked><label
for="all">Search through all</label></li>
<li><input type="radio" name="searchoption" ng-model="searchBy" value="birdName" id="Birdname"><label
for="birdname">Search by birdname</label></li>
<li><input type="radio" name="searchoption" ng-model="searchBy" value="place" id="Place"><label
for="place">Search by place</label></li>
last change in ng-repeat to filter out based on searchBy value set by above radio buttons in search
<li ng-repeat="capture in captures|filter:search">...</li>
Set initial value in controller for searchBy equal to $ to search in all properties of the object on initial page load that can be changed by selecting different properties from drop down.
For more example please have a look at existing post angularjs: change filter options dynamically
Fiddle example mentioned in above post

Related

Bootstrap button toggle group submitting both options with form

The following is a part of a form that is submitted created using bootstrap. The goal here is to create an option group; selecting one option should unselect (or "turn off") the other.
html:
<div class="col btn-group btn-group-toggle form-group" role="radiogroup" data-toggle="buttons">
<label class="btn btn-outline-success active"> <input id="create_option_activated" type="radio" name="create_option_activated" autocomplete="off" /> Activated </label>
<label class="btn btn-outline-danger"> <input id="create_option_deprecated" type="radio" name="create_option_deprecated" autocomplete="off" /> Deprecated </label>
</div>
Messing around with the options a bit I noticed that when I click both buttons, both stay selected when I submit the form. Here is the form submission:
{
"create_option_activated": "on",
"create_option_deprecated": "on",
}
I would like only one option to be selected. Do I need to use javascript/jquery to achieve this or is there just something wrong with my html?
The values of the name attribute for a group of radio buttons must be the same. This is how radio buttons work.
But this situation can be circumvented by writing a little jquery logic that disables the label for all radio buttons except the current one.
let classesSet = '.col.btn-group.btn-group-toggle.form-group';
$(classesSet + ' input[type=radio]').on("change", function () {
$(classesSet + ' input[type=radio]').not(this).prop('checked', false);
console.log($(this).attr('name'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col btn-group btn-group-toggle form-group" role="radiogroup" data-toggle="buttons">
<label class="btn btn-outline-success active"> <input id="create_option_activated" type="radio" name="create_option_activated" autocomplete="off" /> Activated </label>
<label class="btn btn-outline-danger"> <input id="create_option_deprecated" type="radio" name="create_option_deprecated" autocomplete="off" /> Deprecated </label>
</div>

jQuery - Click checkbox add class and remove class

I am using bootstrap to create a checkbox and I want to create a checkbox that clicks on all checkboxes and vice versa (I know there are a lot of guides in stackoverflow about this) but in all it only works on the inputs.
In this case I am enclosing the input with a label "label", when activating the checkbox bootstrap automatically adds the "active" class to this tag that causes the "check" to appear. When I tried to implement scripts found here that added the "checked" attribute to the input of the checkbox, they did not work for this very reason so I tried the following:
$('label#seleccionartodos').click(function(){
$('input.videoscheck').prop('checked', true).parent().addClass('active');
});
And this is my html:
<div class="form-group" data-toggle="buttons">
<label for="selectall">SELECT / UNSELECT ALL:</label>
<label class="btn btn-success" id="seleccionartodos">
<input type="checkbox" id="selectall" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
<div class="form-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox" class="videoscheck" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
<div class="form-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox" class="videoscheck" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
<div class="form-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox" class="videoscheck" autocomplete="off">
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
This works halfway, when I click the checkbox, add the "checked" attribute to all the checkboxes with the ".videoscheck" class and also adds the "active" class to the parent tag that encloses them.
But since I'm not good with jQuery, I do not know how to do it so that when I click it again, all other checkboxes will be deselected (that is, the opposite of the initial action).
Here's a Fiddle showing what I'm exposing.
$('label#seleccionartodos').click(function(){
$('input.videoscheck').prop('checked', $(this).children('input').is(':checked'))
.parent().toggleClass('active');
});
But I prefer this way: (you already bound label to checkbox, so you can deal with change event of checkbox)
$('#selectall').on('change', function() {
$('input.videoscheck').prop('checked', $(this).is(':checked')).parent().toggleClass('active');
});
I think it's better to bind a change event on the checkbox itself:
$('input#selectall').change(function(){
if (this.checked) {
$('input.videoscheck').prop('checked', true).parent().addClass('active');
} else {
$('input.videoscheck').prop('checked', false).parent().removeClass('active');
}
});
jQuery has a toggleClass function:
$('div').click(function() {
$(this).toggleClass('active');
}

Angular2: RadioButton change event is not binding

Here, I want to simply bind RadioButton with change event. Not using any library.
Following works fine.
<input type="radio" name="test" value="A" (change)="onPropertyChange('test')">
<input type="radio" name="test" value="B" (change)="onPropertyChange('test')">
But this one is not :
<div class="btn-group col-lg-2" data-toggle="buttons" >
<label *ngFor=" let app of applications; let i = index; "
class="btn btn-default " [ngClass]="{'active':( ticket.app == app)}">
<input type="radio" id="app{{i}}" name="app" value="{{i}}"
checked="{{ ( ticket.app == app ) ? 'checked' : ''}}" (change)="
onPropertyChange('app')" >
{{app}}
</label>
</div>
While binding change event to label, it is giving me old value.
Can anyone suggest right approach?
With Angular 2 RC2 it’s no longer needed to create the RadioButtonState:
Radio Buttons can now share FormControl instance
<form #f="ngForm">
<input type="radio" name="food" [(ngModel)]="food" value="chicken">
<input type="radio" name="food" [(ngModel)]="food" value="fish">
</form>
And:
class MyComp {
food = 'fish';
}
Source: 5thingsangular - Issue #8
Using ng2-bootstrap,
<div class="btn-group col-lg-2">
<label *ngFor="let app of applications" class="btn btn-default" [(ngModel)]="ticket.app" btnRadio="{{app}}">{{app}}</label>
</div>
In .ts file,
Added import { ButtonRadioDirective } from 'ng2-bootstrap/components/buttons';
In #Component annotation, passed it as directives: [ButtonRadioDirective].
It works fine. Hope it will work for you.
Two way binding without a library:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default" [class.active]="yourVariable==item" (click)="yourVariable=item" *ngFor="let item of items">
<input type="radio" style="display: none;" name="radios" [(ngModel)]="yourVariable" [value]="item" [checked]="yourVariable==item" />
{{yourLabelText}}
</label>
</div>

Get Bootstrap Buttons Value on click

I have a form with multiple bootstrap buttons. When the user clicks on the button I want to refine results.
The issue I have is trying to get the value of the button**s** clicked in the javascript function that is called to refine the results.
The code for the buttons is below
<div class="row">
<div class="col-md-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="btnPublic" checked> Public Questions
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="btnPrivate"> Private Questions
</label>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-md-6">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="btnQuestionsForMe" checked> Questions For Me
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="btnQuestionsIAsked"> Questions I Asked
</label>
</div>
</div>
</div>
How do I get the value of the two separate buttons via javascript in the same function.
In your example you will only ever be able to have one radio button checked, since all of your radio button names are called "options". If you want the user to be able to select two of the four radio buttons you will need to change the names of the radio buttons you want to be grouped together. I have put together a nice JsFiddle example for you that does what you are asking.
You will need to attach a change event to each radio button so you know when buttons are checked. Example:
$("#btnQuestionsForMe").change(function(){
doSomethingWithCheckedRadio()
});
Here is the javascript code using jquery to get all of the checked radio buttons:
function getCheckedRadios(){
var checkedIds = [];
$("input[type='radio']").each(function(i, obj){
if($(this).prop("checked")){
checkedIds.push($(this).attr("id"));
}
});
return checkedIds;
}
Hope this helps!

Bootstrap radio button with function

What I am trying to accomplish:
I am trying to make a form where when a user selects yes a div slides down, and when the user selects no the div slides up (thus making what is in that div invisible). and I want this to have a nice display (to look almost like a button in a group that can toggle and only one is able to toggle at a time such as a radio button) it should look more or less like this:
http://getbootstrap.com/components/#btn-groups
What my problem is:
When I toggle this button it will not fire a function.
Where it gets weird
I notice that when I don't set the data-toggle="buttons" I get radio buttons that have the little circle and fire the function, but when I set data-toggle="buttons" it will not fire the function.
Here is my form:
<form id="questionnaire">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="yes" name="vomit" />yes
</label>
<label class="btn btn-default">
<input class="btn btn-default" data-role="none" type="radio" value="no" name="vomit" />no
</label>
</div>
<div class="expand">
<h4>How many times?</h4>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
and the function I am trying to fire:
$('#questionnaire input[name=vomit]').on('change', function () {
var $p = $('.expand');
if ($('input[name=vomit]:checked').val() == "yes") {
//alert("hello");
$p.slideDown();
}
else {
//alert("nope");
$p.slideUp();
}
});
Can anyone please help me get the radio button to look like the bootstrap (and once selected they stay the color) one but that functions?
Thanks
I ended up using this switch here :
http://proto.io/freebies/onoff/
here is the html:
<h4>Did you Vomit?</h4>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="vomit" />
<label class="onoffswitch-label" for="vomit">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="expand">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="number" class="form-control">
</div>
</div>
here is the jquery
$("#vomit").change(function () {
var $p = $('.expand');
if ($(this).is(':checked')) {//this is true if the switch is on
$(this).val("Yes");
$p.slideDown();
}
else {
$(this).val("No");
$("#numVomit").val(0);
$p.slideUp();
}
});
It seems like there was truly a conflict with jquery, bootstrap and jquery-ui. I will have to end up doing some code cleanup to see exactly where it is conflicting.

Categories

Resources