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!
Related
Sorry for asking this question again. but I'm new to angularjs. my que is...
I have five drop downs which are loading from json using angular js(ng-option). now I need that if user selecting value in one drop down that same value should not appear in another four dropdowns.
I really want solution. I search a lot and practice more and more but. Couldn't find any solution. Plz plz plz help me.
I'm not sure if I've got your problem right, but I would try to create an array, let's say $scope.selectedOptions. And then on select push the value to this array. After that you can filter the options in other dropdowns with lodash for example.
here is the solution that you can apply in easy way.
one model you sending to other select.
<select ng-model="countryList"
data-ng-options="countryList for countryList in countryListArray" ng-change="getStates(countryList)" >
<option value="" disabled selected>-- Choose Country--</option>
<select ng-disabled="!countryList" ng-model="stateList"
data-ng-options="stateList for stateList in stateListArray" ng-change="getCities(stateList)" >
<option value="" disabled selected>-- Choose State --</option>
</select>
you need to add below code in your dropdown elements so as to avoid recursive calls to all three of your dropdowns during change in ng-model values.
ng-model-options="{ updateOn: 'change', debounce: { change: 0 } }"
Also there is a function which updates data object of your $scope.records array. Please take a look at this fiddle. I think this is what the specific thing is which you wanted.
I have form and i am showing the input field depending on the select list (if they select tow the input field tow will be showing ) and its work fine
my problem is the text fields are rquired , so if they select one option then the other field related to other options will be hidden , the form is not submitting to database anymore because that hidden fields are required
what is the solution to solve it?
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<input ng-show="myDropDown=='two'" type="text" required>
thank you
Use ng-if rather than ng-show.
The former removes the field from the DOM, whereas the latter just applies a CSS rule hiding it.
I am trying to show tags in a Bootstrap select combobox. However, ng-repeat is not populating the options. After some research, I believe I need to write a directive for this, because Bootstrap takes the options and makes a list out of them before Angular adds the options. But I don't know what writing a directive involves.
<select class="combobox form-control" ng-model = "tags.repeatSelect">
<option ng-repeat = "tag in tags.tagNames" value = "{{tag.string}}"> {{tag.string}} </option>
This may solve your problem.
<select data-ng-model="modelValue" class="form-control" data-ng-options="item.string for item in tags.tagNames">
</select>
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 am getting empty Option field in select tag.
My code is shown below:
openSelectBoxModel="47"
openSelectList=[{id:""47",name:"text"}];
valuekey="id";
titlekey="name";
<select id="reportOpenSelectBoxSingle" size="6" ng-style='selectStyle' class="openSelectBox" ng-model="openSelectBoxModel" ng-change="changeFn()" >
<option ng-selected="openSelectBoxModel===item[valueKey]" ng-repeat="item in openSelectList" id="" ng-value="{{item[valueKey]}}" ng-title="{{item[titleKey]}}" ng-bind="item[titleKey]"></option>
</select>
Please help me to solve this problem.
You should not use ng-selected with ng-model.
The thing to do is to bind the selected item to your ng-model before displaying it.
//Also, instead of ng-repeat, you should use ng-option
As far as performance is regarded : ng-options does not create child scopes for every iteration. When angular performs its digest, your ng-repeat will slow it. If you have a list with hundreds of elements, you will feel a difference.
<select id="reportOpenSelectBoxSingle"
size="6"
ng-style='selectStyle'
class="openSelectBox"
ng-model="openSelectBoxModel"
ng-change="changeFn()" >
<option ng-repeat="item in openSelectList"
value="{{item[valueKey]}}"
title="{{item[titleKey]}}"
ng-bind="item[titleKey]">
</option>
</select>
Furthermore, you need to declare your variables inside a controller :
$scope.openSelectBoxModel="47";
$scope.openSelectList=[{id:"47",name:"text"}];
$scope.valuekey="id";
$scope.titlekey="name";