I'm new to Angular.js . The problem is with my ng-model and ng-option. I have a data which shows code number with city name in my dropdownlist. I have made some changes to show only the city and remove the numbers in the dropdown list and it works fine Ex: CHENNAI. But, if i use ng-model and show the value in my Angular expression, still i'm getting the same data EX: 0123 CHENNAI. Using ng-model how can i show only the city name in the Angular expression i.e {{}}.
Here is the html:
<div class="form-group">
<label>Branch : <i class="mandate">*</i></label>
<select class="form-control input-md" name='branchName' ng-model="query.branch.branchName" ng-options="branch.branchName as showName(branch.branchName) for branch in baseBranches">
<option value="" selected>-- Select Branch --</option>
</select>
<span class="error" ng-show="search_form.branchName.$error.required">Branch is required</span>
</div>
And the script written to remove numbers:
$scope.showName = function(branchName){
return branchName.replace(/\d+/g, '')
//alert(branchName);
}
Please help from this because i'm new to Angularjs.
If you want both model value and text value that is shown to be without the number i.e "123CHENNAI" as "CHENNAI" use the same "showName" function you have written for the model value too as shown below :
<select class="form-control input-md" name='branchName' ng-model="query.branch.branchName" ng-options="showName(branch.branchName) as showName(branch.branchName) for branch in baseBranches">
<option value="" selected>-- Select Branch --</option>
</select>
Fiddle link here, Please check if that is what you are expecting.
Change your data into like
$scope.array =[{
number: 123,
name: "abc"
},
{
number: 123,
name: "abc"
}]
Related
I want to display some options in a select list based on data in an object. For example if the data property is 0 i want to display a select option as 0 , with option to change to 1, vice versa. However in the html, no option value is played in the field. What am i doing wrong?
Here is my code:
<div class="form-group">
<label for="isVisible" class="label">Set Visibility</label>
<select *ngIf="category.isVisible === 0" class="form-select" id="isVisible" formControlName="isVisible">
<option selected value="0">Hidden</option>
<option value="1">Visible</option>
</select>
<select *ngIf="category.isVisible === 1" class="form-select" id="isVisible" formControlName="isVisible">
<option selected value="1">Visible</option>
<option value="0">Hidden</option>
</select>
</div>
Here is an example of an object i am passing to the html/view:
{
"id": 10023,
"product": "nike tiempo trainers",
"price": 55.00,
"isVisible": 1
}
Not suggest doing your approach manually, but would suggest that just provide the category.isVisible value to FormControl. The reactive form will handle it.
<select class="form-select" id="isVisible" formControlName="isVisible">
<option value="0">Hidden</option>
<option value="1">Visible</option>
</select>
Solution 1: Patch value to FormControl.
Note: This approach is not suggested if the category object is got from API.
this.form = this.fb.group({
isVisible: [this.category.isVisible],
});
Solution 2: Patch value to FormControl.
this.form.controls.isVisible.patchValue(this.category.isVisible);
Solution 3: Patch category object to FormGroup.
Note: Do consider this approach when you want to bind the whole object to the form group instead of binding each property to form control one by one.
this.form.patchValue(this.category);
Sample StackBlitz Demo
I think I am having an issue with value binding. I have 2 dropdowns on my page currently. The rest of the page is using PrimeNg for UI and would like to make these dropdowns look the same as the rest of the page. How should I go about making this work.
One dropdown is a supervisor list.
<div class="ui-g form-group">
<label for="supervisors">Supervisors * </label>
<select
class="form-control"
id="supervisors"
required
[(ngModel)]="model.supervisor"
name="supervisor"
>
<option *ngFor="let sup of supervisors" [value]="sup">
{{sup}}
</option>
<div
[hidden]="supervisors.valid || supervisors.pristine"
class="alert alert-danger"
>
Supervisor is required
</div>
</select>
</div>
The other is a leave code list
<div class="ui-g-12 ui-md-1" id="test">
<label for="codes">Leave Codes * </label>
<select
class="form-control"
id="codes"
placeholder="Select Leave Code *"
required
[(ngModel)]="model.code"
name="code"
>
<option *ngFor="let cod of codes" [value]="cod">{{cod}}</option>
</select>
</div>
I have 2 arrays of values being called from my .ts file
supervisors = ['Alex',"Jones",'Joe','Rogan'];
codes = ['Personal Leave','Vacation Leave', 'Sick Leave'];
When I use the tags I just get an empty drop down. I tried just using initially but then I was not able to get the required fields to validate.
Did you import DropdownModule?
import {DropdownModule} from 'primeng/dropdown';
See the documentation, html binding should be
<p-dropdown [options]="supervisorList" [(ngModel)]="supervisor"></p-dropdown>
where supervisorList will be defined as SelectItem in controller and needs to be in a label + value format.
supervisorList: SelectItem[];
this.supervisorList= [
{label: 'Alex', value: 'Alex'},
...
];
I have a dropdown menu using an *ngFor loop and all the options are data bound. I'm trying to put a placeholder in until one option is selected and if I use the first set of code the placeholder appears perfectly but when I include the [(ngModel)] (which I need) the placeholder disappears.
Note: The ngModel is bound to the index of the dropdown so I can use that to filter a JSON file, which is why I also have an index running.
I've tried using 'placeholder' and 'required placeholder' and adding an initial option in before the for loop options
HTML Code with working placeholder but no ngModel
<label for="filter-coach-sel">Option</label>
<select required placeholder="" class="form-control" id="filter-coach-sel" >
<option hidden value="" disabled selected>Select an option </option>
<option *ngFor = " let coach of navHistory;">{{coach.account.name}}</option>
</select>
HTML Code with ngModel but placeholder no longer works
<div class="form-group">
<label for="filter-coach-sel">Coach</label>
<select required placeholder="" [(ngModel)]="selectedCoachIndex" (change) = "changeCoach()" class="form-control" id="filter-coach-sel" >
<option disabled selected>Select one category </option>
<option *ngFor = " let coach of navHistory; let i = index" value="{{i}}"> {{coach.account.first_name}}</option>
</select>
</div>
Since you are using ngModel to bind the select box, your placeholder option also needs to be one among the value. Try initializing as selectedCoachIndex=""; as assigning value="" for your option
<div class="form-group">
<label for="filter-coach-sel">Coach</label>
<select [(ngModel)]="selectedCoachIndex" class="form-control" >
<option disabled selected value="">Select one category </option>
<option *ngFor = " let coach of navHistory; let i = index" value="{{i}}"> {{coach.first_name}}</option>
</select>
</div>
And your .ts file would have something like this
navHistory = [{
first_name: 'Bob'
},{
first_name: 'Jon'
},{
first_name: 'Mat'
}];
selectedCoachIndex = "";
Stackblitz Demo
I am using the below code to create a select field . Here the value is getting updated to the ngmodel . I also want to get the name of the option to store in another field
ie: Value in one field (ID) and name in another field (Selected value) .
Is there any way to achieve this .?
( <select name="ORG_ID" #ORG_ID="ngModel" [(ngModel)]="siteuses.ORG_ID" class="form-control"
[class.is-invalid]="!isValid && (siteuses.ORG_ID==''|| siteuses.ORG_ID==null)">
<option *ngFor="let item of this.sharedService.l_operating_units_s" value="{{item.BU_ID}}">{{item.NAME}}
</option>
</select>
)
you can use a getter
get nameOperating()
{
operating=this.sharedService.l_operating_units_s
.find(x=>x.BU_ID==siteuses.ORG_ID);
return operating?operating.NAME:null;
}
or store the full item selected using [ngValue] in the options
<select name="ORG_ID" #ORG_ID="ngModel" [(ngModel)]="site" class="form-control">
<option *ngFor="let item of this.sharedService.l_operating_units_s"
[ngValue]="item">{{item.NAME}}
</option>
</select>
<!--just for check-->
{{site.NAME}}{{site.BU_ID}}
In "site" you has the full selected, so in site.NAME you has the name, and in site.BU_ID you has the ID
I have the following code:
<select class="form-control" required>
<option *ngFor="let car of cars" type="text">{{car.Name}}</option>
</select>
my problem is that i can get just a name, so *ngFor fails.
is there a way in HTML to make a condition like. If not Javascript or Jquery
//There are more than 1 option
if(options.length>1){<option *ngFor="let car of cars" type="text">{{car.Name}}</option>}
//There is only an option
else {<option *ngIf="car" type="text">{{car.Name}}</option>}
Car
export class Car {
id: String;
name: [{
brand: String,
}
}]
}
JSON returns an Array[] when there are more than one element. If not, it returns an Object{} so I can not use *ngFor
Solved
The problem was in the back-end, and not in the front-end
You can use *ngIf directive like:
<select id="oneICO" class="form-control" required *ngIf="cars.length > 1">
<option *ngFor="let car of cars">{{car.Name}}</option>
</select>
<input type="text" *ngIf="cars.length < 2">{{car.Name}}</input>
Checking if a variable is an array in the template is sort of nasty How to check type of variable in ngIf in Angular2
It would be better to check if !(cars instanceof Array) and then turn it into an array in your javascript code.
In html you can use ngif in angular2
<div *ngIf="options.length>1">
<option *ngFor="let car of cars" type="text">{{car.Name}}</option>
</div>
or simple put the next code in html
<option *ngIf="options.length == 1 " type="text">{{car.Name}}</option>
cars is not a collection so you don't need any angular directives:
<select id="oneICO" class="form-control" required>
<option>{{cars.Name}}</option>
</select>
In which case, rename cars to car so that it signifies a single item.
[It is a little pointless, though, have a select with only a single option.]
Note that an option does not have a type attribute.
Your original code is fine. There's nothing wrong with it.
<select id="oneICO" class="form-control" required>
<option *ngFor="let car of cars" type="text">{{car.Name}}</option>
</select>
If you have single car, make an array of single element and it will work just fine.
cars = ['Honda']
If you have multiple cars, you'll have something like this.
cars = ['Honda', 'Toyota', 'Mitsubishi']