the 1st (FIRST!!) item in a combo box simply goes blank.
the item is actually there, but gets invisible. it only gets visible when I click on it. when I click on any other item, the 1st item disappears (becomes blank) again.
the problem only happens to the 1st item in the combo box.
this is not the default initial blank item that is commonly seen in many combo box. it is a real item, with a real value, that becomes blank out of nothing inside the combo.
I'm not applying any sort of filter on the ng-options.
could someone help?
I finally managed to make the 1st item visible inside the combo-box. I tried many options and the one that worked was removing the
<div class='modal-body'> </div>
from the modal html and replacing it for
<form class='form'> </form>.
the main body of the modal is now inside the "form". I wonder why it worked.
I also have a question about the
$scope.form = {type : $scope.typeOptions[0].value};
thing. I want to use it in another situation, but the list is declare in the html, not in the javascript. I mean, there is no "$scope.typeOptions" or equivalent in my javascript. I have the following in my html
<div >
<select data-ng-disabled="v1.array2.length == 0 || v1.butt != '2'"
class="col7"
name="orderOptions"
id="orderOptId"
data-ng-click="v1....()"
data-ng-model="v1...." >
<option value="A">Ascending</option>
<option value="D">Descending</option>
</select>
</div>
In this case, how should I use it?
Thanks.
You can use ng-init="v1.... = 'A'" or ng-init="v1.... = 'D'" with your ng-model like following. thanks to ng-init, we can set initial option in select element.
<select ng-init="v1.... = 'D'"
data-ng-disabled="v1.array2.length == 0 || v1.butt != '2'"
class="col7"
name="orderOptions"
id="orderOptId"
data-ng-click="v1....()"
data-ng-model="v1...." >
<option value="A">Ascending</option>
<option value="D">Descending</option>
</select>
Related
I am facing some issue on select tab when using in ng-repeat.
On Stackoverflow i found many solution related to my broblem but i am not able to solve my broblem.
Here is my code..
on the top of page i define my controler
<ion-view view-title="Product" ng-controller="productCtrl as pd">
and on controller
self.pdata = response;
On html page my code is..
<div ng-if="pd.pdata.optionid.length > 0" class="prodetail" ng-repeat="x in pd.pdata.optionid">
<h5>{{x.title}}</h5>
<select name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;">
<option ng-repeat="y in pd.pdata.optionvalue[x.option_id]" value="{{y.value_id}}" selected>{{y.title | uppercase}}</option>
</select>
</div>
here my select tab is in ng-repeat loop
so that every time my ng-model is define dynamically.
My Problem is:-extra blank option added using ng-repeat in select tag
modify your select tag like this, it's a bit mouthful but works alternatively you can also keep your option tag and remove ng-options from my select tag.
<select ng-init="pd[x.title] = pd[x.title] || pd.pdata.optionvalue[x.option_id][0].value_id" name="{{x.title}}" ng-model="pd[x.title]" style="right:5px;" ng-options="y.value_id as y.title.toUpperCase() for y in pd.pdata.optionvalue[x.option_id]">
</select>
here is a jsFiddle
Initially problem seems to be here
value="{{y.value_id}}"
see more here The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options
use a hard coded empty value
<option value="" ng-if="false"></option>
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
I have a drop down which is populated using ng-repeat as below(with dummy values) :
<select ng-model="methodId" name="methodName" id="method" >
<option ng-repeat="detail in details" value="{{detail.modeId}}" ng- selected="detail.modeId == a.modeId"> {{detail.description}} </option>
</select>
On clicking the drop down, an empty row is also populated along with other values
Solutions tried :
1)To add an extra option.
<option value="" ng-hide="true"></option>
This works in chrome, but not in IE
2)To initialize the ng-model.
This works in most of the cases. But there is a scenario in our project where we cant initialize the ng-model value all the time(as it is dependent on few other factors)
Is there any other solution for this problem. Kindly provide your suggestions. Thanks for your time in advance!
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