In my angular application , I have created one dropdown containing sim name. Those names are coming from API. I also set default value as All sim. But it is not working. Here is my code snippet.
<select ng-model="selectSim" class="selectpicker" ng-options=" item.description for item in simList">
<option value="all">Select All</option>
When I I render this page , I can see dropdown containing Sim name but my "select all" option is missing.
I cant figure it out whats wrong in my code.
Set option value = ""
<select ng-model="selectSim" class="selectpicker" ng-options=" item.description for item in simList">
<option value="">Select All</option>
</select>
A single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent the null or "not selected" option.
try this
This is html code (don't need option tag )
<select ng-model="selectSim" class="selectpicker" ng-options=" item.description for item in simList">
and write this way in your controller code where assign values to simList
$scope.simList.push({ description : "Select All", Id: 0 }); // this line helps to dynamoically add defualt value in `$scope.simList` array, now the default item added in bottom side
$scope.selectSim= $scope.simList[$scope.simList.length - 1];// this is helps to assign default item `selectSim` model
'*' here Id: 0 is your value name and dummy values. you need to change value name
Related
I wanted to pass array value in dropdown(select) value but it always shows array key in dropdown value.
I am trying code given below
$databases = array(
'db1','db2','db3','db4','db5',
);
Angular Code
<select ng-model="databases" ng-change="showTables($index)" ng-options="key as value for (key,value) in databases" >
<option value="">-- choose Database --</option>
ng-options is build like this :
ng-options="key as value for (key,value) in databases"
After the in, you have your list. Between for and in, it's the object that you will use for a single select.
Then you have 2 other attributes. Here it's key and value. Value is what you want to print in your list, what is visible for the user. Key is the data which will be put in your DOM as "value".
Here is you want to set your array attribute in your value. Because here you have a simple data, and you don't need any difference between what is visible in your list, and what is in your DOM value, you can do this :
ng-options="value for value in databases"
Moreover, I also notice that you use your variable databases on your ng-model. That's not a good idea, this will erase your list when you will select a value. You have to use an other var.
If the array contains only Strings, you can simply use ng-repeat:
Html:
<div ng-controller="DatabaseSelectExampleController as vm">
<select ng-model="vm.selectedDatabase">
<option ng-repeat="actDatabase in vm.databases" value="{{actDatabase}}">
{{actDatabase}}
</option>
</select>
</div>
JS:
angular.module('yourApp')
.controller('DatabaseSelectExampleController', function(){
this.databases = ['database one', 'someother db', 'a db aswell'];
this.selectedDatabase = this.databases[0];
});
In the form I have a drop down list with multiple choice, as shown below. Elements are loaded from the database.
<label>Items</label>
<select class="form-control m-b"
ng-model="model.livingComplexId"
x-ng-change="updateOne(model.livingComplexId)">
<option></option>
<option ng-repeat="itemOne in itemsForAddrLevelOne"
value="{{itemOne.id}}">{{itemOne.tobName}}</option>
</select>
I make choose.
For example, I choose an item2.
Then save data. Then, I open the form to edit and I want to see an item that I chose, but the list is empty...
How can I set the previously selected value?
I would recommend to use the ngOptions directive to generate the select menu options:
<select ng-model="model.livingComplexId" ng-options="itemOne.id as itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
Maybe you could additionally change the ng-model value to model and use ng-options="itemOne as ..." (without the .id) and add an track by itemOne.id.
<select ng-model="yourModel" ng-options="itemOne.tobName for itemOne in itemsForAddrLevelOne"></select>
In the js you should set $scope.yourModel = itemsForAddrLevelOne[0];
I have a <select> element populated with the acceptable values via ng-options and bound to a model with ng-model. It is possible that the model is set to a value that is not acceptable. (It used to be acceptable but no longer is.) In this case AngularJS renders the <select> as if it had an empty item selected.
Is there a way to have it render the selected value even if it is not listed in ng-options? I know I can put a default <option> inside the <select>. It's better than displaying an empty item, but it's a static string. I'd like to have the invalid value displayed.
Interesting problem. I think that you will be able to achieve this with the combination of ngInit directive to set up initial value (it can be missing from the allowed options list) and ngShow to hide it once valid option is selected.
Something like this:
<select
ng-init="preselected = selected"
ng-change="preselected = null"
ng-model="selected"
ng-options="item.id as item.name for item in items">
<option value="" ng-show="preselected">{{preselected}}</option>
</select>
Demo: http://plnkr.co/edit/lUTR0pHDPecU0OUUwjzt?p=preview
According to the Angular documentation, you can create a null option that is not part of your model. This allows you to have a descriptive option. I.E. in their example they have -- choose color --. How can I make the null option the default option? I want the user to see this descriptive null option when they first load the page.
Bonus points if you can also tell me how to make the null option be disabled via angular.
The value is set to null automatically.
But if you receive data from REST for exaple and it will be set to some value - you can add ng-init to your select tag.
And for disable null option after selection of some value - you need to add ng-disabled to your option tag.
<select ng-model="model" ng-options="item for item in items" ng-init="model = null">
<option value="" ng-disabled="!!model">--Select option--</option>
</select>
And in controller:
.controller('MainCtrl', function($scope) {
$scope.model = 'First';
$scope.items = ['First', 'Second', 'Third'];
});
Demo: http://plnkr.co/edit/esoX26I9bESE59yneOvv
Just use the ng-if to completely remove it once they have a selection. Best option from my experience.
<select name="objectSelector"
ng-model="selectedObject"
ng-options="obj for obj in Objects" required>
<option value="" ng-if="!selectedObject">--- Select Object ---</option>
</select>
If you really, really must show the '--- Select Object ---' after a choice has already been made, then you may just want to insert a second
<option value="" ng-if="!!selectedObject" disabled>--- Select Object ---</option>
Then the visible option will display accordingly...haven't found a simple way to set 'disabled' dynamically.
I have an enum (I code using TypeScript):
export enum AddressType
{
NotSet = 0,
Home = 1,
Work = 2,
Headquarters = 3,
Custom = -1,
}
Then in my controller I have a field named type, into which I set the initial value that should be selected in the select input (I set it to AddressType.Headquarters).
Finally, in my HTML I put the following:
<select ng-model="Ctrl.type" ng-options="addressType for addressType in Ctrl.getAddressTypes()"></select>
Everything seems to work fine except one thing: for some reason Angular does not select "3" (Headquarters) initially in the select after all bindings have been updated. Angular creates an extra option like this instead:
<option value="?" selected="selected"></option>
So for some reason Angular cannot figure the initial option to select in the combo.
If the user selects another option of the combo box, Ctrl.type is updated properly so the binding works fine for that part. Basically my problem is just that the option that should be selected initially is not selected as expected.
What am I missing here that is causing that problem?
Found the problem:
The array returned by Ctrl.getAddressTypes() was an array of strings:
["0", "1", "2", "3", "1"]
and what was stored in Ctrl.type was of type number.
AngularJS compares the array supplied to ng-options to the value supplied to ng-model using the '===' operator. 3 does not equal to "3" in that case - that's why it did not work.
I often run into this when using number id's. My way around this quirk is to add ''+ to convert it to string type:
<select ng-options="''+u.id as u.name for u in users"
In a function if the below code is added and the same is called from the ng-init then the issue is also getting resolved. This will resolve the string comparison issue.
$scope.Ctrl.type = "" + $scope.Ctrl.type + "";
I happens because you didn't initiated selected value. Try to set init value with ng-init:
<select ng-model="Ctrl.type"
ng-options="addressType for addressType in Ctrl.getAddressTypes()"
ng-init="Ctrl.type = ..."
></select>
See this Demo Fiddle where we have 2 combos with and without init value. You can see that one combo HTML seems like:
<select ng-model="selectedItem1"
ng-options="selectedItem1.name as selectedItem1.name for selectedItem1 in values" class="ng-pristine ng-valid">
<option value="?" selected="selected"></option>
<option value="0">General</option>
<option value="1">Super</option>
<option value="2">Trial</option>
</select>
The proper one:
<select ng-model="selectedItem"
ng-options="selectedItem.name as selectedItem.name for selectedItem in values"
ng-init="selectedItem = values[1].name" class="ng-pristine ng-valid">
<option value="0">General</option>
<option value="1" selected="selected">Super</option>
<option value="2">Trial</option>
</select>