I have a select tag to which I am applying angular chosen.
This is my select tag
<select name="rname" id="rname" ng-model="rname" ng-init="rname='CustomReport'"
ng-options="key as value for (key , value) in reportsValuesOptions track by key" chosen>
<option value="">---Select---</option>
</select>
The above select tag is getting populated from below object
$scope.reportsValuesOptions = {'Cash Position Report':'Cash Position Report','Detail Report':'Detail Report','Reconciliation Report':'Reconciliation Report','Summary Report':'Summary Report','Sweep Report':'Sweep Report','FCCS/FBPS Detail Report':'FCCS/FBPS Detail Report','CustomReport':'Custom Report Name'};
The object is a pair of values and options for select tag where the key is options tags value and the value is the option tag text
Now I want to set the default value of the select tag to 'CustomReport' as its option value and 'Custom Report Name' as its option text from the above object, using ng-init.
I tried doing ng-init="rname='CustomReport'", but it doesn't work
How to set its value from object's key value pair?
FULL EXAMPLE
The problem with your solution is since you are giving an object and AngularJS is mostly designed for arrays it causes AngularJS not to be able to track them properly. You probably wanted to write a shorter object for reportsValueOptions but it should be an array of objects which has a form similar to the following:
[
{label: 'First Label', value:'first-option'},
{label: 'Second Label', value:'second-option'}
]
Here is the modified version of your jsfiddle with modified object that also shows which one is selected.
You can also learn more about problems with objects here: https://docs.angularjs.org/api/ng/directive/ngOptions#complex-models-objects-or-collections-
You can simply use ng-init like this
<select ng-init="somethingHere = options[0]"
ng-model="somethingHere"
ng-options="option.name for option in options">
</select>
Related
The boolean value assigned to the model doesn't pre-select the corresponding option - shows first an empty option instead:
Select:
<select data-ng-model="scriptData.privacy" data-ng-options="privacyOption.value as privacyOption.label for privacyOption in privacyOptionsSelect track by privacyOption.value"></select>
Options in the controller:
$scope.privacyOptionsSelect=[
{
label:'Registered users only can view this',
value: false
},
{
label:'Anyone with the link can view this',
value: true
}
];
scriptData.privacy is set to false.
You should be careful when using the ngOptions expression with the format:
select as label for value in array
together with track by. This is because track by is applied to the value assigned to your ngModel, so if your selection is in the form privacyOption.value, the track by expression is actually applied to the value. This is the reason it doesn't successfully select the initial value.
To fix this you have two options. You can either just skip track by. This would work:
<select data-ng-model="scriptData.privacy"
data-ng-options="privacyOption.value as privacyOption.label for privacyOption
in privacyOptionsSelect"></select>
Or you could change the select as-expression to select the entire privacyOption-object. This would work as well (note the ngModel-directive changed as well):
<select data-ng-model="scriptData"
data-ng-options="privacyOption as privacyOption.label for privacyOption
in privacyOptionsSelect track by privacyOption.value"></select>
For a full (and probably better) explanation, I recommend the ngOptions documentation.
try ng-repeat instead of ng-options by applying the ng-repeat to option elements inside the select.
This is my Angular 2 Code:
HTML:
<select class="form-control" [(ngModel)]="wrapupData.assignToEmployee">
<option value="" disabled>Choose Status</option>
<option *ngFor="let emp of masterWrapupLov.employeeList"
[value]='emp.id'>{{emp?.name}}</option>
</select>
where wrapupData.assignToEmployee is a string, masterWrapupLov.employeeList is an array of Objects comprising id: string and name: string.
This code works perfectly fine selecting the option to make it reflect in the wrapupData.assignToEmployee model.
What I wanted to achieve is to select a default option when loading the DOM and update the model if the option is changed. I tried using [selected] comparing emp.id with the value I wanted to select, it did work in the UI but is not getting binded with the model as and when I change it. I tried using a default value using the model, that too is not working as it should and is not getting binded after the first default binding. I don't know if I'm clear enough, but I tried many methods that people have already suggested but nothing seems to work.
I have been working on trying to set the default pre-selected option for angularJS and for some reason I can't. Here is a link to the relevant Plunkr.
Here is the relevant code:
<select
ng-model="selectedOption"
ng-options="option.value as option.name for option in options">
</select>
I've tried ng-init and a bunch of different ways; I can't figure how to make the top option the preselected one.
The linked answer suggests using ng-init. I would go with assigning default option into selectedOption in controller or directive's link function:
$scope.selectedOption = options[0]
I don't see a need to use another directive for this simple task.
If what you want is to set one of the options pre-defined in options,
in your ng-init do something like this $scope.selectedOption = <value> where <value> is the value property of the object you want to be marked as selected by default. For example 1 if your first object in options would be, {value: 1, name: "Option Number 1}. See code below:
$scope.options = [{value:1, name: "Option 1"}, {value:2, name: "Options 2"}];
$scope.selectedOption = 1;
On the other hand, if you only want to show a predefined option indicating the user to select one option (and not one of the options in your options)...
This is a very simple (but effective way to achieve that). See code below:
<select
ng-model="selectedOption"
ng-options="option.value as option.name for option in options">
<option value="">--Default--</option>
</select>
just update model of the element i.e. selectedOption='yourDefaultValue'
What is the version of angular are you using?
if the latest one, then you can use below code::
<select
ng-model="selectedOption" [ng-value]='yourDefaultValue'`
ng-options="option.value as option.name for option in options">
</select>
Link to updated plunkr : http://plnkr.co/edit/SkS0NqyXpnMcddu80anf?p=preview
Updating model code moved in the function and also select as and track by should be avoided as mentioned in the angular doc
Be careful when using select as and track by in the same expression.
I have a select element, which renders a list of objects, nothing spectacular.
<select ng-model="defaultObject" ng-options="obj.description for obj in allObjects">
</select>
which generates:
<select ng-model="defaultObject" ng-options="obj.description for obj in allObjects">
<option value="?" selected="selected" label=""></option>
<option value="0" label="Value 1">Value1</option>
</select>
and it looks fine. It generates first empty option because at the time of rendering allObjects isn't created yet, so that's expected.
However, the problem is that when defaultObject model is set to an object that represents second option inside the select element(Value1), select element doesn't update selected option, everything looks the same. It's like a 1-way binding, defaultObject model can be set from a dropdown, but updating defaultObject doesn't update the dropdown to select that element. Could this be fixed ?
The problem is that angular appears to use == to check what item in the array has been selected. In JavaScript, two objects that contain the same data are still not the same objects, they're references to different objects:
{a: 1} == {a: 1} // false
The easiest solution is to set your model to an item from the array manually, in your controller:
$scope.defaultObject = $scope.allObjects[0];
// (Or some other index that exists in the array)
Another option would be to bind the <select> to a specific value in the objects, instead of to the object itself:
<select
ng-model="defaultObject"
ng-options="obj.id as obj.description for obj in allObjects">
</select> <!-- ^ bound value, ^ display value -->
This will result in the selected obj's id being stored in $scope.defaultObject, and on page load, the obj with the id that's set in $scope.defaultObject will be selected.
The disadvantage here is that your model doesn't contain the complete selected object, only it's id property.
Your code is wrong , please try this code instead of your code (change obj to object in the ng-option )
<select ng-model="defaultObject" ng-options="object.description for object
in allObjects">
<option ng-if="!defaultObject" value="">Select Object</option>
</select>
You need add only one option for default select.
<select ng-model="myModel" id="searchAsset" class="search">
<option ng-repeat="asset in assettype" ng-click="assetclick()" value="{{asset}}"></option>
</select>
<select class="search" id="searchLevel">
<option class="chooseLevel" ng-repeat="level in levellist" value="{{level}}"></option>
</select>
While performing some logic on second dropdown, I want to fetch the selected value of the first dropdown or vice-versa. How can I do this?
I tried using $("#searchLevel").value and $("#searchLevel option:selected").text()
The direct answer to this question is to use the .val() method for jQuery like so:
var selectedVal = $("#searchLevel").val();
However, the slightly less direct, but true answer is that you should not be doing anything like this in an angular app - changes in the dom should only be affecting your view model.
When your using angular, jquery is really not required.
As per your code, The first select menu value will be stored in the ng-model attribute value i.e. myModel.
In your second select menu, specific the ng-model as well. You can just fetch the value of the drop down menu by calling ng-model name.
<select class="search" id="searchLevel" ng-model="secondSelect">
<option class="chooseLevel" ng-repeat="level in levellist" value="{{level}}"></option>
</select>
For example,
If you want to access the value inside your controller on change event, then
$scope.changeEventhandlerForFirstSelect = function() {
// $scope.myModel will contain the value
}
Similarly, for second select menu $scope.secondSelect will give that value.
try
$("#searchLevel").val();
with: $("#searchLevel option:selected").text() you get the text not the value.