I have a select menu with using ng-model and a list of values like so:
<select ng-model="$ctrl.ngModel"
id = "{{$ctrl.idPrefix}}-select"
ng-change="$ctrl.change()">
<option ng-repeat="setting in $ctrl.values track by setting[$ctrl.valuePropertyName]"
ng-value="setting[$ctrl.valuePropertyName]">
{{ setting[$ctrl.textPropertyName] }}
</option>
</select>
This all works well when the ng model value is in the list of $ctrl.Values. However, when it isn't I get a default option auto-inserted with a blank text which is displayed. I know I can initialize the properties value to ensure this doesn't happen. However, what I actually want to do is change the display text of this default option to something like "Please select" or similar. Is there a way to set the text which is displayed for this default option?
you can manage this by checking if your array is empty or ngModel is null/undefined
like as sample
<select ng-model="$ctrl.ngModel"
id = "{{$ctrl.idPrefix}}-select"
ng-change="$ctrl.change()">
<option value="" ng-if="$ctrl.values == null || $ctrl.values.length == 0 || $ctrl.ngModel == null"> Please select ... </option>
<option ng-repeat="setting in $ctrl.values track by setting[$ctrl.valuePropertyName]"
ng-value="setting[$ctrl.valuePropertyName]">
{{ setting[$ctrl.textPropertyName] }}
</option>
</select>
Related
I'm working on angularjs and I have a field that has two options YES/NO.
When someone will fill this field I need to show the two options but non of them is selected. So it will look like an empty value, but this empty value should not be an option. I tried to add <option value="?"></option> in the following code, but then the empty value is an option.
Any ideas?
<div class="col-md-3" ng-if="obj.options.length > 0">
<select class="form-control" ng-model="patientReportedSymptomsUI[key]" ng-disabled="$root.newVisit">
<option value="?"></option>
<option ng-repeat="option in obj.options">{{option}}</option>
</select>
</div>
I am using angular 5 and I want to select multiple inputs from the dropdown and store the selected input into an array.
<select multiple class="form-control " name="fea" ngModel size="3" >
<option *ngFor="let feature of features | async" [ngValue]="feature">
{{ feature.name }}
</option>
</select>
Here I am selecting multiple inputs correctly but how can I store selected values in an array?
Any help will be appreciated!
You can change option tag to below.
<option *ngFor="let feature of features | async" [ngValue]="feature" (click)="AddtoArray(feature.name)">
{{ feature.name }}
</option>
In you component,
array:any[]=[];
AddtoArray(feature:any){
this.array.push(feature);
}
You can simply use ngModel to add your selections to your model / array.
Kindly use something like below:-
<select multiple class="form-control " name="fea" ngModel size="3" [(ngModel)]="selectedFeatures">
<option *ngFor="let feature of features" [ngValue]="feature">
{{ feature.name }}
</option>
</select>
For a working solution, have a look at the below stackblitz:-
https://stackblitz.com/edit/angular-hyazbe?file=src%2Fapp%2Fapp.component.html
Don't forget to press shift key to make multiple selections.
PS: I have not used the async pipe in the code but it should work fine with it too.
This can easily be achieved using (change) event as follows:
<select multiple class="form-control " name="fea" [(ngModel)]="model" (change)="valueAdded(model)">
<option *ngFor="let feature of features | async" [ngValue]="feature">
{{ feature.name }}
</option>
</select>
And in .ts file
var **yourArray**:string[]; // define array
valueAdded(val){
**yourArray**.Push(val);
}
This will add the selected options from dropDown in array named as **yourArray**
How to get the object of selected option in angular js using ng-repeat? Sample fiddle is here where myself populating the dropdown as,
<select ng-model="id" ng-init="id = '-1'" ng-change="select(option)">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option.id}}">{{option.name}}</option>
</select>
If someone chose option with id=1, i want to get the object {id:1, name:'A' in $scope variable.
EDIT: Myself tried with ng-options but filtering is not happening as required based on previous dropdown selection. sample fiddle
Use option object in ng-value={{option}} and whenever u select an option your scope.id will have the desired object.
Basically ur ng-model gets populated with selected value.
Just you have to change your option to this
<option ng-repeat="option in list" value="{{'Id : ' + option.id + ' Name : ' + option.name }}">{{option.name}}</option>
Hope this will work for you and you were looking for the same result
You have 2 option to get as Object.
option 1 :
you can use Filter to get Object
<select ng-model="id" ng-init="id = '-1'" ng-change="select((list|filter:{id:id}))">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option.id}}">{{option.name}}</option>
</select>
updated fiddler here
option 2 :
set your value as Object (option)
<select ng-model="id" ng-init="id = '-1'" ng-change="select(option)">
<option value="-1">--Select--</option>
<option ng-repeat="option in list" value="{{option}}">{{option.name}}</option>
</select>
Guys after I used the angular directive ng-options I got this result
<select name="users" id="users" ng-options="user.id as user.name for user in users" ng-model="user">
<option value="number:1" label="Developers">Ahmed</option>
<option value="number:2" label="Designers">Jon</option>
<option value="number:3" label="HR">Astm</option>
<option value="number:4" label="Doctor">Fady</option>
</select>
<select name="colors" id="colors" ng-options="color.code as color.name for color in colors" ng-model="color">
<option value="string:ff0000" label="Developers">Red</option>
<option value="string:ffffff" label="Designers">White</option>
<option value="string:000000" label="HR">Black</option>
</select>
why the option value contains the data type such as number:1 or string:ffffff ??
how I can remove the data type from it and keeping only the value ?
Add track by [id] at the end of ng-options.
In your case it would be:
ng-options="user.id as user.name for user in users track by user.id"
and
ng-options="color.code as color.name for color in colors track by color.code"
Right now there is not option in angular to remove that type. If you need that, use custom directive with ng-option as parent.
I have managed to filter out what i want, the problem is it only brings back the first object in the database that matches it. i am trying to have a select box with filter by the job salary minimum. $50,000 $60,000 and so on. for example, when i select the $50,000 option the only result returned is jobs that have there salary set at exactly 50000. I need everything returned that is above 50000. any help is appreciated.
Controller
$scope.salaryFilter = function (min) {
return min.salaryMin >= $scope.salary_Min ;
}
View
<label>Salary Desired:</label><br />
<select class="form-control" ng-model="search.salaryMin">
<option value="">Select</option>
<option ng-repeat="salary in jobArray | filter:salaryFilter"></option>
<option ng-model="salary_salaryMin" value="50000">$50,000</option>
<option ng-model="salary.salaryMin" value="60000">$60,000</option>
<option ng-model="salary.salaryMin" value="70000">$70,000</option>
<option ng-model="salary.salaryMin" value="80000">$80,000</option>
<option ng-model="salary.salaryMin" value="90000">$90,000</option>
<option ng-model="salary.salaryMin" value="100000">$100,000</option>
</select><br />
Here's a plunker with a basic example of how to do this.
From the behaviour you describe, it sounds like you may be matching strings rather than integers, but we won't know if you don't show us more code
Controller:
$scope.data = [
{
"val":27000,
"text":"$27,000"
},{
"val":29000,
"text":"$29,000"
},{
"val":50000,
"text":"$50,000"
},{
"val":70000,
"text":"$70,000"
}];
$scope.name = "John";
$scope.salaryMin = 27000;
$scope.salaryFilter = function(salary) {
if (salary.val >= $scope.salaryMin)
return true;
}
Template:
<select >
<option ng-repeat="salary in data | filter: salaryFilter" value="{{ salary.val }}">{{ salary.text }}</option>
</select>
Changing the value of $scope.salaryMin will filter the data
Edit
The problem is shown in this plunker, and i've created a fork here which fixes the issue
There were a couple problems
We're setting the individual salary options manually in the option list, so there's no need for the ng-repeat in our salary select box. We also need this select box to set the $scope.salary_Min variable, so we shouldn't have ng-model set to salary.salaryMin on the option tags.
<!-- REMOVE THIS -->
<option ng-repeat="salary in jobArray | filter:salaryFilter"></option>
<!-- REMOVE ng-model FROM these -->
<option ng-model="salary_salaryMin" value="50000">$50,000</option>
<option ng-model="salary.salaryMin" value="60000">$60,000</option>
<option ng-model="salary.salaryMin" value="70000">$70,000</option>
<option ng-model="salary.salaryMin" value="80000">$80,000</option>
<option ng-model="salary.salaryMin" value="90000">$90,000</option>
<option ng-model="salary.salaryMin" value="100000">$100,000</option>
Because we want the select box to set the $scope.salary_Min variable (which is used in our filter), we add ng-model to the select tag
<select class="form-control" ng-model="salary_Min">
We previously had the salaryFilter on our option tag, but we want to use it to filter the table. So we add it to the table where we're using ng-repeat. It's okay to keep the existing search filter because filters in Angularjs are stackable
<tr ng-repeat="job in jobArray | filter:search | filter:salaryFilter">
<td>{{job.jobTitle}}</td>
<td>{{job.companyName}}</td>
<td>{{job.description}}</td>
<td>{{job.city}}</td>
<td>{{job.salaryMin}}</td>
</tr>
This is nearly done. The one issue left is that these values are being interpreted as strings by our filter, which can cause some confusing results. We just need to make sure they're interpreted as integers using parseInt()
$scope.salaryFilter = function (min) {
return parseInt(min.salaryMin) >= parseInt($scope.salary_Min) ;
};