I'm new to angular and i'm trying to set a default state to select when my ng-model is null. Basically I want to set it to 'None' if the model is empty. I tried the below code but it's not working.
<select ng-init="item.carType | item.carType='none'" ng-model="item.carType">
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
Try this:
<select ng-init="item.carType = item.carType || 'none'" ng-model="item.carType">
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
That said, per the docs, this is probably a misuse of ngInit. The proper way to do this would be to initialize your model with sane values in the controller (or service, if that's where it came from).
H i ,
My thoughts are it is best to do this in the app rather than the template.
if(typeof $scope.item.carType==="undefined") {
$scope.item.carType="none";
}
or simply setting the value
$scope.item.carType="none";
before it is updated with whatever you are using to set the value : -
$scope.item.carType="none";
$scope.item.carType=someasyncfunctionthatmighttakeawhileandthetemplateisrenderedbeforeitarrives();
You can solve using a value in ng-init
<select ng-init="item.carType='none'" ng-model="item.carType">
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
What I would suggest you to do is this.
Make a function in your controller and check if $scope.item.carType == undefined assign a default value.
$scope.setDefaultValueForCarType = function () {
if($scope.item.carType == undefined) {
$scope.item.carType = "none";
}
}
This will work too.
<select ng-init="item.carType='none'" ng-model="item.carType">
Often happens that your ng-model="item.carType" doesn't match any of the select option keys because of the wrong case.
For example: item.cartType is "Manual" but in the options you have an option <option value="manual">Manual</option> in this case it won't work and in the console output you'll see something like this: <option value="? string:Manual ?"></option>
So, either correct your data model or your select option value:
<option value="Manual">Manual</option>
What you are looking for is undefined.
If the value is undefined do you need a value to go to the database when 'none' is selected?
If sending an empty is acceptable you may consider the following:
<select ng-model="item.carType">
<option value="">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
Fiddle
This allows you to pass in a value as well and use the same form for edits and new records.
Based on Rob Sedgwick idea, in a pinch deadline I'm not using $scope so with controller as syntax.
loadStates(); //this calls my function for my code
// this is based on what Rob S. is doing with $scope
if(typeof vm.scriptQuestion.statecode ==="undefined") {
console.log('in');
vm.scriptQuestion.statecode = "AA"; // "AA" happens to be the value of the default name for All of my States that is then displaying "ALL" now when before it was blank
}
Here is my Select ( yes, this is a garbage way of doing angular select boxes as ng-repeat is very limited for a select )
<select id="States" ng-model="vm.scriptQuestion.statecode">
<option ng-repeat="state in vm.states" value="{{state.StateCode}}">{{state.StateName}}</option>
</select>
I've made the following changes to your code and it should work now. I've removed the second part in ng-init="" and set the None option value to undefined.
<select ng-init="item.carType='none'" ng-model="item.carType">
<option value=undefined>None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
Related
I have the following dropdown. I want to set All Patients as the default value.
<select [(ngModel)]="searchModel.careprovider">
<option [value]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [value]="user._id.$oid">
{{user.dn}}
</option>
</select>
My model is declared this way:
searchModel: any = { location: null, practice: null, name: '', careProvider: 0 };
I set the practiceUsers this way:
this._practice.getUsers(this.searchModel.practice).subscribe(result => {
this.practiceUsers = result;
this.searchModel.careProvider = 0;
});
No matter how I change it I always just get a blank option as the default. I've tried adding an object to the this.practiceUsers array after it is loaded, then setting the model value. I've tried setting the model value with and without quotes to see if a number or string made a difference. Everything I try still results in the default being the blank option.
In Angular 1 I would have used ng-options, but that is no longer available for Angular 2, and every example I find shows to use the ngFor for dropdowns.
Object attributes are case sensitive, in your object, attribute is called careProvider, but in your template, you are using searchModel.careprovider with lowercase p. I think you also have to use NgValue directive instead of value because you are using NgModel directive. So, this should work: it is not working
<select [(ngModel)]="searchModel.careProvider">
<option [ngValue]="0">All Pateints</option>
<option *ngFor="let user of practiceUsers" [ngValue]="user._id.$oid">
{{user.dn}}
</option>
</select>
Try to use [selected] attribute. I solved similar problem this way:
<select>
<option *ngFor="let option of options" value="{{option.id}}" [selected]="option === selectedOption">
{{option.name}}
</option>
</select>
I hope this helps a little
<select class="form-control" id="policeid_country_id" name="policeid_country_id" formControlName="policeid_country_id">
<option [ngValue]="null">Select</option>
<option [ngValue]="country.id" *ngFor="let country of countries">{{country.country}}</option>
</select>
Suppose I have a list:
<select>
<option value="Horse">Horse</option>
<option value="Bird">Bird</option>
<option value="Dogs">Dogs</option>
<option value="Cats">Cats</option>
</select>
I know how to grab the values of each option by looping through. My problem is I have code that changes the default values to something if certain conditions are met but if the conditions are not met I need to revert back to the DEFAULT values. I need to get the default values into an array so I can use them to revert back if the conditions are not met...etc. I need pure javascript no frameworks.
So for example if I change <option value="Horse">Horse</option>to <option value="Train">Train</option>I need to be able to store <option value="Horse">Horse</option> BEFORE it gets changed the same way you can get the default value for an input field to revert back to it if needed.
Use following code:
var options = document.querySelectorAll("option");
var optionsArray = Array.prototype.map.call(options, function(x) {
return x.value;
});
<select>
<option value="Horse">Horse</option>
<option value="Bird">Bird</option>
<option value="Dogs">Dogs</option>
<option value="Cats">Cats</option>
</select>
I figured out the solution and that is to get the values on page load and make sure your script is before the closing body tag.
I am trying to toggle ng-selected options in Angular, but am running into some difficulty. Here's what I'm trying:
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option value="0-15" ng-click="toggleSelect(datacut, '0-15')" ng-selected="datacut.ages.indexOf('0-15') !== -1">15 and Younger</option>
<option value="16-19" ng-selected="datacut.ages.indexOf('16-19') !== -1">16 - 19</option>
<option value="20-24" ng-selected="datacut.ages.indexOf('20-24') !== -1">20 - 24</option>
</select>
Controller:
$scope.toggleSelect = function(dc, str){
dc.ages.splice(dc.ages.indexOf(str), 1);
//e.currentTarget.selected = !e.currentTarget.selected;
};
The problem is that when I click on an option gets selected on mousedown, and on release gets unselected. The commented out code also does the same thing.
I feel like this should have a simple solution, but I can't really figure out an elegant solution.
Any help would be much appreciated.
Edit: For clarification - I need to be able to have nothing selected, so clicking a single selected element needs to unselect it. I also need to be able to select multiple options.
Your are using ng-model which does the magic for you. So ng-click and ng-selected is not necessary. See my working fiddle
<select ng-model="datacut.ages" multiple>
<option value="" disabled="disabled">Please Select</option>
<option ng-value="'0-15'">15 and Younger</option>
<option ng-value="'16-19'" >16 - 19</option>
<option ng-value="'20-24'" >20 - 24</option>
</select>
It looks like you want to remove the selected age from the ages model. Then you need to use the ng-change directive. And remove the ng-click or ng-selected. But leave the ng-model to access the value on the method that remove the selected item.
See my plunker
<select multiple name="ages" unseletable forbiden-opt="datacut.MIN_AGE" ng-model="datacut.chosenAge">
<option value="" disabled="disabled">Please Select</option>
<option ng-repeat="age in datacut.ages" value="{{age}}">
{{age}}
</option>
</select>
EDIT: This should be made in a directive because you need to update the option html to unselect the option.
So I have the following code:
<select id="basicInput" ng-model="MyCtrl.value">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
But in the console, I find this:
<select id="basicInput" ng-model="MyCtrl.value">
<option value="? object:null ?"></option>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I've seen this question resolved before, but all of answers I found were wrestling with either ng-options or ng-repeat. This code uses neither, so why am I getting this issue in the first place? More importantly, how do I prevent my page from loading this tag with the phantom option? Does it have something to do with the ng-model?
EDIT:
Since asking this question, I've added the following to my code:
<select id="basicInput" ng-model="MyCtrl.value">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I have also set Myctrl.value = 0. Still I find myself with the same error. Ideas?
This question has already answered before. Please check this URL. According them
The empty option is generated when a value referenced by ng-model
doesn't exist in a set of options passed to ng-options. This happens
to prevent accidental model selection: AngularJS can see that the
initial model is either undefined or not in the set of options and
don't want to decide model value on its own.
Instead you can do it in this way
<select id="basicInput" ng-model="MyCtrl.value">
<option value="" ng-if="false"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option
You must initialize MyCtrl.value to one of the values provided by the options, otherwise Angular will render an empty selection because the selected model does not exist in the list of options.
in MyCtrl:
$scope.value = 1;
If I have a block of markup like this:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
the default value will be "volvo" even though there is not a selected="selected" property on any option.
Is there a way to tell if the value is derived through an explicit selected property versus the default implicit value?
If so, what is the necessary Javascript or JQuery code to do that?
var $changed;
$('select').on('change', function(){
$changed = true;
});
if($changed){
//manual selection event
}else{
//nope, it's default
}
Or, just add <option> ---- Choose ---- </option> and avoid that unnecessary code.
You could just check for selected attribute:
if(!$('select').find('option[selected]').length)
alert('default option');
Maybe I didn't get the question but volvo is selected by default because of how HTML works.
You can use Ohgodwhy suggestion for a "blank" option.
Here's a fiddle