I am using the following code for ng-init :
<select ng-model="yourSelect3"
class="form-control"
ng-init="yourSelect3=requirements.Item2[0]"
ng-options="yourSelect3.StateName for yourSelect3 in requirements.Item2">
</select>
But the initial value is not displayed. Why?
Your issue is that ng-init does not do what you think it does. It is primarily used in certain cases with ng-select. Angular doc : https://docs.angularjs.org/api/ng/directive/ngInit
What you need to do is simply initialize your model in your controller :
$scope.yourSelect3 = $scope.requirements.item2[0];
Your ng-options is syntactically correct. However, I would recommend that you change your ng-options so that the iterator does not share the name with your model ; this could lead to all sorts of confusion
<select ng-model="yourSelect3"
class="form-control"
ng-options="item.StateName for item in requirements.Item2">
</select>
REWRITE: my previous answer was a little unclear and it missed out a second error.
1st problem: 'yourSelect3' in the ng-options is a 'temp' variable to be used only in the context of the ng-options. You can't use this as the ng-model.
2nd problem: in the ng-options you are saying to use the 'StateName' property as the choosen value however your ng-init is trying to assign the whole object as the choosen value.
So...
if you want StateName as the choosenValue use..
<select ng-model="choosenValue"
class="form-control"
ng-init="choosenValue=requirements.Item2[0].StateName"
ng-options="yourSelect3.StateName for yourSelect3 in requirements.Item2">
</select>
<!-- for debugging --> {{ choosenValue }} <!-- should show a statename -->
else if you want the object as the choosenValue but display the statename as the options title use..
<select ng-model="choosenValue"
class="form-control"
ng-init="choosenValue=requirements.Item2[0]"
ng-options="yourSelect3 as yourSelect3.StateName for yourSelect3 in requirements.Item2">
</select>
<!-- for debugging --> {{ choosenValue | json }} <!-- should show the object -->
<!-- for debugging --> {{ choosenValue.StateName }} <!-- should show a statename -->
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>
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";
I have this select in AngularJS:
<select id="objectId" name="seccionId" class="form-control" ng-model="arguments.seccion" data-ng-options="item.id as item.valor for item in arguments.objects" required></select>
I like to save both values in scope, but I only save one value.
Any form to save both values?
Thanks!!!
If you want the entire value to be bound to ng-model than you can simply omit the select portion of your ng-options expression.
In this case, it's the item.id part.
data-ng-options="item.valor for item in arguments.objects"
This will ensure the entire item is bound to your ng-model when selecting.
I am assuming you want a multiple select. Have you tried using the attribute multiple:
<select id="objectId" name="seccionId" class="form-control" ng-model="arguments.seccion" multiple="true" data-ng-options="item.id as item.valor for item in arguments.objects" required></select>
DEMO
I have an select tag which i am using ng-model to get the selected value. The Select tag shows Empty first value, it should be showing Choose. What i am doing wrong?
<select ng-model="todo.opts">
<option>Choose</option>
<option><25%</option>
<option>25-50%</option>
<option>>50%</option>
</select>
Try to set the todo.opts variable in the scope as the value you want to select as a default.
By the way check documentation for the ng-option
Since your model will be empty to begin with, you can easily select the Choose option by giving it an empty value:
<div ng-app="app" ng-controller="myCtrl">
<select ng-model="opts">
<option value="">Choose</option>
<option><25%</option>
<option>25-50%</option>
<option>>50%</option>
</select>
</div>
Here is an updated fiddle.
I have a problem and I don't see how to deal with it simply.
I have a select with option (with ng-repeat in it, I don't use ng-options to do that because I need to have ng-class on option).
<input ng-model="query" type="text">
<select class="span12 long-list" multiple="multiple">
<option ng-class="whatever" value="{{ element[idAttribute] }}"
ng-repeat="element in elements | filter:query">
{{ element[valueAttribute] | translate }}
</option>
</select>
This code is part of a template directive so valueAttribute and idAttribute are dynamique.
With this code, the filter is applied on my elements objects.
The problem is that the filter only applies on untranslated content of the object and I want it to be applied on the object AND the translated value.
Is there a simple way to do it in using only the view ?
I see two solutions to do it but I have to manipulate other part of the code :
- Use a custom filter wich translate the value before filtering it
- Add in each element object a translated attribute
thank you