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
Related
I have this array in my typescript. I'm using angular 6.
formats: any = ['Years/Months/Days', 'Years/Months/Week', 'Months/Days', 'Week/Days', 'Week/Half Days', 'Week/4 Hours', 'Week/Hours', 'Days/Hours/30Min', 'Days/Hours/15Min'];
and this is my html code.
<select class="form-control" formControlName="format">
<option [ngValue]="null">{{'Select Type' | translate}}</option>
<option *ngFor="let format of formats" [ngValue]="format">{{format}}</option>
</select>
I want to change the dropdown value with help of next and prevoius button.
I recommend you to have a variable for storing the index of the selected option and initialize it to zero, every time the selected value gets changed update the index.
then you can create two buttons for next and previous with click event mapped to both buttons
the .ts file and function might look something like this
selectedindex:any = 0;
changed(event : Event):any{
console.log(event)
if( event.target){
console.log( this.formats.indexOf(this.yourformobject.controls['format'].value))
this.selectedindex = this.formats.indexOf(this.yourformobject.controls['format'].value;
}
}
next():any{
if(this.selectedindex < this.formats.length-1){
this.selectedindex++;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);
}
}
previous():any{
if(this.selectedindex>0){
this.selectedindex--;
this.yourformobject.controls['format'].setValue(this.formats[this.selectedindex]);
}
}
and the Html look like this
<form [formGroup]="yourformobject">
<select class="form-control" formControlName="format" (click)="changed($event)">
<option [ngValue]="null">Select Type</option>
<option *ngFor="let format of formats" [ngValue]="format">{{format}}</option>
</select>
<button (click)="next()">next</button>
<button (click)="previous()">previous</button>
</form>
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']
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"
}]
I have an app angular that can be translate both in french and english. I'm using angular translate to do that. The problem is: I receive an array of object from an API and in those object, I have a property bookConditionEn and a property bookConditionFr and other like ids.
In a select input , I want to display bookCondition depending by the current language.
In the controller, I can get the current language with the $translate service
vm.getCurrentLanguage = function() {
return $translate.use();
}
So, I wonder if in the view I could use a condition in the ng-option.
<select
ng-options="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-model="bookCtrl.bookConditions"
name="Condition" class="form-control"
></select>
You can use conditionals to show/hide options by changing the way you are creating the <select>:
<select ng-options=ng-model="bookCtrl.bookConditions" name="Condition" class="form-control">
<option
ng-repeat="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
ng-if="vm.getCurrentLanguage==bookCondition.language"
>
</select>
I didn't quite understand how you have your JSON set up so I am assuming you have a property that contains the language (bookCondition.language). You can compare this against the user's currently-selected language which is returned by your vm.getCurrentLanguage. By the way, I suggest changing that from a function to just be a variable like this:
vm.currentLanguage = $translate.use();
This should be all you need to do to specify options in a conditional manner.
It worked your way
<select ng-model="bookCtrl.bookCondition" name="Condition" class="form-control">
<option ng-if="bookCtrl.getCurrentLanguage() === 'en'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookCondition}}</option>
<option ng-if="bookCtrl.getCurrentLanguage() === 'fr'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookConditionFr}}</option>
</select>
I am using AngularJS, and Select2 to create a nice dropdown menu.
I've included an ng-click in the Option tag (of the Select tag). However, the ng-click does not seem to be working when in a Select2.
<select ui-select2 >
<option ng-repeat="car in myGarage" ng-click="ride(car)">
{{car.Name}}
</option>
</select>
It also doesn't seem to work when using a normal Select tag.
How can I get them to work?
JSFiddle:
use ng-change and ng-model instead of ng-click
<select ui-select2 ng-change="ride(car)" ng-model="car">
<option ng-repeat="car in myGarage" value ={{car.Name}}>
{{car.Name}}
</option>
</select>
That is the incorrect way to use a select.
First off, there is ng-options attribute to a select that needs to be used instead of ng-repeat on the options.
Secondly, instead of using ng-click, you can assign a ng-model to the select that updates with the selected car as follows:
In your controller, you need only the following model and you can remove other models
$scope.myGarage = [
{
Name: "Toyota 86"
},
{
Name: "Hyundai Genesis Coupe"
},
{
Name: "Nissan GTR"
},
{
Name: "Veyron"
}
];
In your view, use ng-options and ng-model as follows:
<select ng-model="selectedCarUI" ng-options="car.Name as car.Name
for car in myGarage" ui-select2>
</select>
Using UI-Select2 - Car: {{selectedCarUI}}
<select ng-model="selectedCarNormal" ng-options="car.Name as car.Name
for car in myGarage">
</select>
Using Normal Select - Car: {{selectedCarNormal}}
This should now work. Here is a fiddle for the same
The OP is using angular-ui select2. The following is from the angular-iu/ui-select2 website:
"ui-select2 is incompatible with <select ng-options>. For the best results use <option ng-repeat> instead."
See the "Working with dynamic options" section at https://github.com/angular-ui/ui-select2
So ng-change is probably the best option.
I don't know if is a lit bit late but i just discover how to make it work:
1) I'm using the original Select2
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
2) the html goes as follows:
<select class="form-control js-example-basic-single"
ng-options="item.label for item in yourVector"
ng-change="yourFunction(item)" ng-model="item">
</select>
3) the script at the end of the template:
<script type="text/javascript">
$(".js-example-basic-single").select2();
</script>
it works for me :)