How can I remove the first empty < option > in the select drop down? I just want the first < option > to be the "-Select-".
html
<div ng-controller="ExampleController">
Distance in KM
<span class="nullable">
<select ng-model="myColor" >
<option value="null">- Select -</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span><br/>
</div>
script
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myColor = '';
}]);
Use ng-init to initialize default blank value and also set blank value in option element:
<div ng-controller="ExampleController" ng-init="myColor = ''">
Distance in KM
<select ng-model="myColor">
<option value="">- Select -</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
Or since you are already initializing it in controller, just delete null from 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
when am using this code.selected value shown as empty.i want select 1st value as one.
<select class="form-control" name="cityID" id="Select1" ng-change="RoomSelect()" ng-model="sRoom">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
When am using ng-model at the time default value selected as empty.otherwise its ok.
Try init sRoom model in controller
$scope.sRoom = 1;
also its better use ng-options instead of repeat option in select tag.
Demo
var app = angular.module('anApp', []);
app.controller('aCtrl', function($scope) {
$scope.sRoom = 1;
$scope.chooses = [{"key":"one","value":1},{"key":"Two","value":2},{"key":"Three","value":3}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="anApp" ng-controller="aCtrl">
<select ng-change="RoomSelect()" ng-model="sRoom" ng-options="k.value as k.key for k in chooses">
</select>
</div>
Try this
<select class="form-control" ng-init="sRoom=1" name="cityID" id="Select1" ng-change="RoomSelect()" ng-model="sRoom">
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
You can also use ng-init
<select class="form-control" ng-init="sRoom=1" name="cityID" id="Select1" ng-change="RoomSelect()"
I have 3 select dropdown box and a label. I need to display the count of Select box which have value in it and need recalculate the count whenever user reset(select empty entry) or select the value of dropdown box using AngularJS.
How to do this in AngularJS ?
Simply you can have a method in the span to check the models and return the count as below.
You can have an object to hold all the selected values.
var app = angular.module('app', []);
app.controller('TestController', function($scope) {
$scope.models = {};
$scope.count = function() {
var count = 0;
angular.forEach($scope.models, function(val, key) {
if(val) ++count;
});
return count;
};
});
angular.bootstrap(document, ['app']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TestController">
<select ng-model="models.model1">
<option value=""></option>
<option value="0">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>
<select ng-model="models.model2">
<option value=""></option>
<option value="0">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>
<select ng-model="models.model3">
<option value=""></option>
<option value="0">Option 1</option>
<option value="1">Option 2</option>
<option value="2">Option 3</option>
</select>
<p>
<span>{{count()}}</span>
</p>
</div>
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 expect the following code to render a drop down list with the third option selected by default. However, when I bind the select with angularjs, the default selection disappears. Any thought?
var myApp = angular.module('myApp', []);
...
<div>
<select id="myselection" ng-model="selectedColors">
<option value="1" >Red</option>
<option value="2">Blue</option>
<option value="3" selected="selected">Green</option>
</select>
<div>
Selected Colors: {{selectedColors }}
</div>
</div>
Here's a working example: http://jsfiddle.net/TXPJZ/134/
Thanks!
The easiest way to fix your implementation is to use ng-init.
<div>
<select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
</div>
Try it on FIDDLE.
Angular overrides the "selected" property when you bind the select to a model. If you inspect the rendered DOM you will find that a new item has been added:
<option value="? undefined:undefined ?"></option>
In order to automatically select the third option you need to pre-populate the model in scope. There are a few ways to do this, including wrapping the select in a controller:
<div ng-controller="MyCtrl">
<select id="myselection" ng-model="selectedColors">
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
And then defining that model in the controller.
var myApp = angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function ($scope) {
$scope.selectedColors = 2;
}]);
Here's a running example.
http://jsfiddle.net/93926/
Alternatively, you could just initialize it using ng-init such as in this example:
<div ng-init="selectedColors=3">
http://jsfiddle.net/9JxqA/1/
EDIT: Removed the selected property in the first example, it's no longer needed.
By adding option with empty value to select and initializing selectedColors to empty string(ng-init="selectedColors=''"), we can see 'select Color' option on top instead of having first color to be selected defaultly:
<div>
<select id="myselection" ng-init="selectedColors=''" ng-model="selectedColors">
<option value="">Select Color</option>
<option value="1">Red</option>
<option value="2">Blue</option>
<option value="3">Green</option>
</select>
<div>Selected Colors: {{selectedColors }}</div>
Try it on Fiddle http://jsfiddle.net/CodecPM/qxyckf7u/
You need to do only two things
1)ng-init="days='noday'"
2)ng-selected="true"
<select class="filtersday" ng-init="days='noday'" ng-model="days">
<option ng-selected="true" value="noday">--Select Day--</option>
You should use single quote to work per
<select ng-model="liveDataType" ng-init="liveDataType='1'" class="form-control input height" required>
<option value="1">Running data</option>
<option value="2">Rest Data</option>
<option value="3">All Data</option>
</select>
Use ng-selected="true"
Check the below code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select ng-model="foo" ng-app >
<option value="1">1</option>
<option ng-selected="true" value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>