can someone tell me how can I make empty value, that if nothing is in list of select, show "n/a"
demo
https://codepen.io/Turqus/pen/wPrKrr?editors=1010
template
<div ng-app="test" ng-controller="select">
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard(selectedBoard)">
<option ng-repeat="item in boards" value="{{$index}}">{{$index}}</option>
</select>
<select class="form-control" ng-model="selectedList">
<option ng-repeat="item in downloadedLists" value="{{$index}}">{{$index}}</option>
</select>
</div>
<option ng-repeat=" item in downloadsLists" >{{$index || "n/a"}}</option>
<select class="form-control" ng-model="selectedList">
<option disabled selected value
ng-show="downloadedLists.length == 0">n/a</option>
<option ng-repeat="item in downloadedLists" value="{{$index}}">{{$index}}</option>
</select>
<option value="">N/A </option>
<option ng-repeat="item in boards" value="{{$index}}">{{$index}}</option>
Related
On button click need to get the dropdown values of each row dont know where the issue is not success in retrieving,the controller goes here,
$scope.values = [];
$scope.Benifit = [{ 'BenefitType': ""},{ 'BenefitType': ""}];
$scope.saveAllValues = function () {
alert($scope.values);
}
HTML
<div ng-repeat="item in Benifit">
<select class="form-control-sm col-md-9" ng-modal="values[$index]">
<option value="">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
</div>
</div>
<button type="button" ng-click="saveAllValues()">Save</button>
Here check out the fiddle
There is a typo on your select change ng-modal with ng-model.
<select class="form-control-sm col-md-9" ng-model="values[$index]">
<option value="">Select</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
</select>
Updated Fiddle
In a parent select option have Option-1,Option-2,Option-3 and also empty also be there. When ever selecting the any option i want to display the below child select fields like if select Option 2 i want display 2 selection fields below like that same, if select empty i don't want to show child selection tags.
This is the code but i don't want to show static way I need to display dynamically
function Controller ($scope) {
$scope.myDropDown = '';
}
<div ng-app ng-controller="Controller">
<select ng-model="myDropDown">
<option value="q"></option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<select ng-show="myDropDown=='one'" >
<option value="1"></option>
<option value="111">1</option>
<option value="1111">1111</option>
<option value="111">1111111</option>
</select>
<select ng-show="myDropDown=='two'" >
<option value="2"></option>
<option value="222">2</option>
<option value="2222">222</option>
<option value="222">22222</option>
</select>
<select ng-show="myDropDown=='two'" >
<option value="22"></option>
<option value="222222">22</option>
<option value="22222222">222222</option>
<option value="222222">2222222222</option>
</select>
<select ng-show="myDropDown=='three'" >
<option value="3"></option>
<option value="333">3</option>
<option value="3333">333</option>
<option value="333">33333</option>
</select>
<select ng-show="myDropDown=='three'" >
<option value="33"></option>
<option value="333333">33</option>
<option value="33333333">333333</option>
<option value="333333">3333333333</option>
</select>
<select ng-show="myDropDown=='three'" >
<option value="333"></option>
<option value="333333333">333</option>
<option value="333333333333">333333333</option>
<option value="333333333">333333333333333</option>
</select>
</div>
if I well understand your question, you want to select item from the select and then show 1,2 or 3 items in the ionic list, if that is what you want, here is an idea to do that:
<div class="well" ng-show="Lang1 == '1'">
<div class="form-group">
<select class="form-control" id="sel2" ng-model="Lang2" ng-change="changeMe()">
<option ng-option value="1">Language 1</option>
<option ng-option value="2">Language 2</option>
<option ng-option value="3">Language 3</option>
</select>
</div>
<ion-list>
<ion-checkbox ng-if="Lang2>=1">Read</ion-checkbox>
<ion-checkbox ng-if="Lang2>=2">Write</ion-checkbox>
<ion-checkbox ng-if="Lang2>=3">Speak</ion-checkbox>
</ion-list>
</div>
here is an example :
Edit
here is what you wantPS: this is just an example to inspire you, the real solution depends on your needs
Edit
what about this example
I have a angular dropdown cmbAll and list of cmbFruit in ng-repeat. I want when i change cmbAll selected value on cmbFruit [i] also change. But on load cmbAll is populated with -1 indexselected and cmbFruit [i] with their specific indexex. Below is the code. Please suggest.
<select id="cmbAll" tabindex="" title="" ng-change="onChange()">
<option value="">-Select One-</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Mango</option>
<option value="4">Papaya</option>
<option value="5">Pear</option>
</select>
<div data-ng-repeat="x in InfoList">
<select id="cmbFruit" name="cmbFruit" ng-model="x.Name"
ng-options="c.Value as c.Text for c in x.List"></select>
</div>
What should be the code for onchange()
Take ng-model for cmbAll
<select id="cmbAll" tabindex="" title="" ng-change="onChange()" ng-model="cmbAll">
<option value="">-Select One-</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Mango</option>
<option value="4">Papaya</option>
<option value="5">Pear</option>
</select>
<div data-ng-repeat="x in InfoList">
<select id="cmbFruit" name="cmbFruit" ng-model="x.Name"
ng-options="c.Value as c.Text for c in x.List"></select>
</div>
Controller.
$scope.onChange = function()
{
for(var i=0 ; i < $scope.InfoList.length; i++)
{
$scope.InfoList[i].name = $scope.cmbAll
}
}
This will assign the value selected in cmbAll to second dropdown.
I have a dropdown list of countries. and when iam selecting a particular country my output should be filtered with details of only that country to be displayed following is my code but not working properly.
<label for="filtercountry" class="control-label col-xs-2">Filter By Country</label>
<div class="col-xs-2">
<select class="form-control">
<option value="None">-- Select --</option>
<option ng-model="Tofilter.country" value="India" ng-change="changed()">India</option>
<option ng-model="Tofilter.country" value="USA" ng-change="changed()">USA</option>
<option ng-model="Tofilter.country" value="Pakistan" ng-change="changed()">Pakistan</option>
<option ng-model="Tofilter.country" value="China" ng-change="changed()">China</option>
<option ng-model="Tofilter.country" value="Australia" ng-change="changed()">Australia</option>
</select>
</div>`<ul id="result">
Name :{{x }}
`
Put ng-change on the select element:
<select class="form-control" ng-change="changed()">
it's not necessary to put your model in all option, put it in select
<select class="form-control" ng-change="changed()" ng-model="Tofilter.country">
<div class="col-xs-2">
<select class="form-control" ng-change="changed()" ng-model="Tofilter.country" >
<option value="None">-- Select --</option>
<option value="India" >India</option>
<option value="USA" >USA</option>
<option value="Pakistan" >Pakistan</option>
<option value="China" >China</option>
<option value="Australia" >Australia</option>
</select>
</div>
Why is this repeater broken
<select name="quarter" ng-model="Quarter" ng-selected="Quarter" >
<option ng-repeat="v in [1,2,3,4]" value="{{v}}">Q{{v}}</option>
</select>
But not the handwritten way?
<select name="quarter" ng-model="Quarter" ng-change="onQuarterChange()" ng-selected="Quarter">
<option value="1">Q1</option>
<option value="2">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
stick with ng-options
<div ng-app>
<h2>Todo</h2>
<div ng-controller="QuarterController">
<select name="quarter" ng-model="Quarter" ng-options="obj.value as obj.text for obj in [{'value': 1,'text' : 'Q1'},{'value':2,'text':'Q2'},{'value':3,'text':'Q3'},{'value':4,'text':'Q4'}]">
</select>
</div>
</div>
function QuarterController($scope) {
$scope.Quarter = 2;
}
http://jsfiddle.net/hDNsm/3/
you might as well define the array in your controller
Notice two things:
'ng-selected' directive should be written on the 'option' element and not on the 'select' element.
the content of the 'ng-selected' attribute should be a condition in which the option is selected. a simple example for this could be if the value of the option equals the select model.
Your code should be something like this:
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" value="{{v}}" ng-selected="v==Quarter">Q{{v}}</option>
</select>