I am new to angular (problem one). I am trying to tie the formatted text from a select with ng-options to the ng-model that is being called in the page. What happens is the below take language codes like en-US and changes the text to English, which displays in the select perfectly. When I use {{ textSelect }} it displays as en-US. So how do I get it to display correctly?
<select ng-model="textSelect" ng-options="language.code as language.name for language in availableLanguages"></select>
<p>{{ textSelect }}</p>
<select ng-model="textSelect"
ng-options="language as language.name for language in availableLanguages"></select>
<p>{{ textSelect.name }}</p>
Is one suggestion.
Related
I am using AngularJS (1.5) and im trying to create a select dropdown that can display a different text when selected vs shown in dropdown options
Option example {id: 1, name: 'text', selected: 'this was selected'}
Given the example above, how can i show the name property when they open the dropdown but the selected property after the option is selected?
You have a couple options for dropdowns in angularjs. If you're going the ng-repeat route, then if you have an array of objects structured like your example, then this would work:
<select ng-model="selectedItem">
<option ng-repeat="item in items" value="item.selected"> {{item.name}} </option>
</select>
This will display the "name" in the dropdown, but since value=item.selected, it will assign the "selected" value to your ng-model.
Alternatively, you can do ng-options for the select and something like this would work:
<select ng-model="selectedItem"
ng-options="item.selected as item.name for item in items">
</select>
This does the same thing, but ng-options tends to allow more flexibility as you can assign entire objects to your model rather than just strings like ng-repeat only allows, plus angular claims it's faster.
Hope this helps. See here for more info https://docs.angularjs.org/api/ng/directive/select
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 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 -->
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
I use the ngOptions directive in the HTML given below:
<select ng-model="selectedGroupToShow.Id" ng-options="g.Id as g.Name for g in myGroups">
<option value>-- All --</option>
</select>
The filter I am using in ng-repeat to show my data goes like this:
filter:{GroupId:selectedGroupToShow.Id}"
Even if I use
filter:selectedGroupToShow
the issue stays the same.Resetting the filter..
This works perfectly, but when I want to clear the filter (select default option - 'All') it will only show data that doesn't have GroupId parameter set at all.
How can I show ALL the data (clear the filter) when choosing default option element within select?
I think I understand your problem and the issue you are facing is when dropdown selected to --ALL-- its value is null and not undefined.
So to reset it you have to set it for undefined.
<div ng-repeat="item in items| filter:{itemId:selectedGroupToShow.Id||undefined}">
{{item.itemId}}
</div>
Please refer the below fiddle I have created for your problem.
fiddle
I did it this way, just with an empty String value.
Hope it could help anyone.
JADE code:
select.form-control(ng-model="productType", ng-init="productType='free'")
option(value="free") FREE
option(value="interest") INTEREST
option(value="hybrid") HYBRID
option(value="") ALL
.col-sm-6.col-md-4.col-lg-3(ng-repeat="product in productList | filter:{ type :productType }") {{product.name}}