Accessing each part of an array using (change) Angular 5 - javascript

I am trying to create a box, where you can click on each option within it and it will filter through data coming from firebase database. So far, I have it working where you can click on each of them. However, I can only get it to perform one task.
Each of the options comes from this array:
items: number[] = [1,2,3,4,5,6,7,8,9];
and the filtering comes from this function:
filterByBedrooms(bedrooms: number) {
this.bedFilter.next(bedrooms);
console.log('clicked')
}
and then I have this form where I call the function:
<form #fSearchPropertiesByBedrooms (change)="filterByBedrooms(items[4])">
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms">
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
Now obviously in this I bind to the function and the array like so:
(change)="filterByBedrooms(items[4])"
I am aware that what I need to do is somehow bind to it like this:
(change)="filterByBedrooms(item)"
However, the *ngFor comes after this part, so it does not work.
My question is, how do I bind (change) to each of the options (coming from the array) within my select box and not just one part of the array?

You don't bind your event to your options, you bind it to your select.
You can see it for yourself : the select carries the ngModel attribute, not the options.
See it as an input of type text, with predefined results.
So simply call your method with the bound ngModel like this.
<select
class="form-control form-control-lg small-drop-down"
type="number"
[(ngModel)]="bedrooms"
name="bedrooms"
(change)="filterByBedrooms(bedrooms)">

You can do like this, just declare an identifier for select and use the value in your method.
<form #fSearchPropertiesByBedrooms (change)="filterByBedrooms(bedrooms.value)">
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" #bedrooms>
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
Also I noticed you have binded the variable bedrooms to select. That means that you have that variable in your controller so you can redefine your filterByBedrooms method to something like this
filterByBedrooms() {
this.bedFilter.next(this.bedrooms);
console.log('clicked')
}
If you are using the second example than your form will look like this
<form #fSearchPropertiesByBedrooms (change)="filterByBedrooms()">
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" >
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>

I would suggest you to use (ngModelChange) event as far as you use ngModel binding, so the code should look like:
<form #fSearchPropertiesByBedrooms>
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" (ngModelChange)="filterByBedrooms($event)">
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
<!-- <button type="submit" class="button button-primary button-xs button-green">Submit</button> -->
</form>
And actually I'm not sure you need a form for this particular control as I see you commented the submit button, so this can be simplified to:
<select class="form-control form-control-lg small-drop-down" type="number" [(ngModel)]="bedrooms" name="bedrooms" (ngModelChange)="filterByBedrooms($event)">
<option [ngValue]="undefined" selected>Beds</option>
<option *ngFor="let item of items" [ngValue]="item"> <button> {{item}} Bed </button> </option>
</select>
Don't forget to add value check on filterByBedrooms function as in your case it can by invoked with undefined value.

Related

(click) funtion not triggering in chrome angular 6

(click) funtion not triggering in my select tag when i use google chrome but its works in mozila
this is my code
<div class="col-xl-4 col-lg-9">
<select formControlName="deptId" class="form-control m-input" >
<option>SELECT</option>
<option *ngFor="let item of listAllDepartment" (click)="getdoctorlistid(item.dept_id)" value={{item.dept_id}}>{{item.dept_name}}</option>
</select>
</div>
Thanks
You should use ngModelChange with select instead of click
<selectformControlName="deptId" class="form-control m-input" [(ngModel)]="itemSelected" (ngModelChange)="getdoctorlistid(itemSelected)">
You can't add such an event to an <option>
You can add
<select
[(ngModel)]="selectedItem"
(ngModelChange)="getdoctorlistid(selectedItem)">
<option>SELECT</option>
<option
*ngFor="let item of listAllDepartment"
(click)="getdoctorlistid(item.dept_id)"
value={{item.dept_id}}>
{{item.dept_name}}
</option>
</select>
Edit: Like #Sajeetharan answered

*ngif Not working after first click. Angular 6

What I want to Achieve is that I have a Select field in angular6 on the basis of the selected value I want to hide and display another div.
Here is the code.
<div class="form-group">
<label for="servicePriviledges">Managed</label>
<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
<option value="false">False</option>
<option value="true">True</option>
</select>
<br>
</div>
<div class="form-group" *ngIf="managed">
<label for="managerType" >Manager Type</label>
<select type="text" aria-hidden="false" class="form-control" id="managerType" name="managerType">
<option value="false">False</option>
<option value="true">True</option>
</select>
</div>
*ngIf does make an impact when I switch it for the first time but not after that. the change is not detected.
I have even tried setting up the visibility attribute of style as well as [hidden] directive but got the same result.
I have even tried giving an on change method but no change in result.
version information:
"#angular/core": "^6.1.6",
"#angular/forms": "^6.1.6",
Both these controls are under a form 'ngForm'.
Another approach is to attach [ngValue] directive for every option.
<select type="text" class="form-control" id="managedServiceInfo" name="managedInfo" [(ngModel)]="managed">
<option [ngValue]="false">False</option>
<option [ngValue]="true">True</option>
</select>
managed will have a string value of 'true' or 'false' update ngIf like this
<div class="form-group" *ngIf="managed === 'true'">
...
</div>
or you can use ngValue so managed will have a boolean value of true , false
<select type="text" class="form-control" name="managedInfo" [(ngModel)]="managed">
<option [ngValue]="false">False</option>
<option [ngValue]="true">True</option>
</select>

Select2 not getting loaded in template. [Meteor + Blaze]

Before marking question duplicate, I want to make clear that I have already tried all the ways possible (e.g. here) to simply load a select2 dropdown on a simple page in Meteor.
Below is simple code to understand my select2 application procedure.
ManageRoles.js
Template.ManageRoles.onRendered(function() {
$(".roleSelect").select2();
});
ManageRoles.html
<form class="assignRoleForm">
<div class="row">
<div class="col-sm-12">
<label>Roles</label>
<select class="roleSelect form-control" multiple="multiple" required>
<option value="">Select Option</option>
<option value="1">ADMIN</option>
<option value="2">MANAGER</option>
</select>
</div>
</div>
<br/>
<div class="text-center">
<button type="submit" class="btn btn-success"> Assign </button>
<button type="button" class="btn btn-danger"> Close </button>
</div>
</form>
select2 Import structure
root\client\vendor\select2\select2-bootstrap.css
root\client\vendor\select2\select2.js
root\client\vendor\select2\style\select2.css
Below is the snapshot of the current output.
****************** Updated *******************
Upon doing this console.log($('.roleSelect').get(0)); I get below in console log
<select class="roleSelect form-control" multiple="multiple" required="">
<option value="">Select Option</option>
<option value="fov9sPjiXtbRdJccR">ADMIN</option>
<option value="ga4p3FwQ76LH4Nq8y">MANAGER</option>
</select>
I would try the following:
Template.ManageRoles.onRendered(function() {
this.$(".roleSelect").select2({
placeholder: 'Select Option'
});
});
And then in the HTML leave the first option blank:
<option value=""></option>

Angular JS select box from table cell disabled

I have html code with AngularJS like below for select box inside table cell.
<td>
<select ng-model="row.status" ng-change="toggle_syslog_filter(row.id,row.status)" >
<option value="0">Disabled</option>
<option value="1">Enabled ( Log Only )</option>
<option value="2">Enabled ( Alerts Active )</option>
</select>
<span style="color:red;">
<i class="fa fa-remove" ng-click="delete_filter(row.id)"></i>
</span>
</td>
but it adds some classes to select box
<td>
<select ng-model="row.status" ng-change="toggle_syslog_filter(row.id,row.status)" class="ng-pristine ng-valid ng-touched">
<option value="0">Disabled</option>
<option value="1">Enabled ( Log Only )</option>
<option value="2">Enabled ( Alerts Active )</option>
</select>
<span style="color:red;">
<i class="fa fa-remove" ng-click="delete_filter(row.id)"></i>
</span>
</td>
it adds the classes
ng-pristine ng-valid ng-touched
and it made the select box disabled.
So what is happening is because of ng-change basically ng-change directive tells AngularJS what to do when the value of an HTML element changes.
So it might be possible that the expression evaluating in ng-change is false. Just for the sake of checking try putting the value of ng-change to ng-change='True' and see if it still disable. Because pristine valid and touched are used to validate if the input field

bootstrap-select selects a wrong option each time.

I am using bootstrap select Bootstrap-select v1.7.2 in Angular. When I select some option from drop down it selects some other option.
Plunker is setup here:
http://plnkr.co/edit/HPPlxx?p=preview
(code is in dashboard.html and dashboard.js)
That's how I am creating it. bootstrap-dropdown is the directive that initiates the drop-down.
<form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
<option ng-repeat="logic in vm.Logics" value="{{logic.value}}">{{logic.displayName}}</option>
</select>
<button type="submit" class="btn btn-sm text-right">Save</button>
</form>
This should fix your problem. You need a blank state option. Also it helps to use ng-options rather than using ng-repeat in the option. Hope this solves your problem!
<div ng-controller="dashboard as vm">
<div class="block-area">
<div class="row col-md-12 ">
<h3 class="block-title"> {{vm.title}}</h3>
<form role="form" name="frmVariableConfig" ng-submit="vm.saveChanges()">
<select required ng-model="vm.CurrCustomer.Logic" name="ddlLogic" check-validation class="validate[required]" ng-options="logic.displayName for logic in vm.Logics track by logic.displayName" bootstrap-dropdown >
<option value="">Pick One</option>
</select>
<button type="submit" class="btn btn-sm text-right">Save</button>
</form>
</div>
</div>
</div>
You should use ng-options to populate the option elements of a select input.
Like so:
<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics track by logic.value" name="ddlLogic" check-validation class="validate[required]" bootstrap-dropdown >
<option value="">Select...</option>
</select>
EDIT
Use the following:
<select ng-model="vm.CurrCustomer.Logic" data-ng-options="logic.displayName for logic in vm.Logics" check-validation class="validate[customFunc]" bootstrap-dropdown>
<option style="display:none" value="">Select</option>
</select>
where customFunc is a new custom validation function you create to check that the selected value is not "".

Categories