Is it possible to pass the who object using ng-repeat in options?
Example:
<select id="cREmp123" ng-model="vm.selEmployee">
<option value="" selected>Choose...</option>
<option ng-repeat="emp in vm.employeeList" value="vm.employeeList[$index]">{{emp.strEmpFirstName}}</option>
</select>
I tried this also
<select id="cREmp123" ng-model="vm.selEmployee">
<option value="" selected>Choose...</option>
<option ng-repeat="emp in vm.employeeList" value="{{emp}}">{{emp.strEmpFirstName}}</option>
</select>
I hope somebody will answer me.
I tried using ng-options and it doesn't solve my problem
Have you tried ng-options?
Sample code for your reference
<select id="cREmp123" ng-model="selEmployee"
ng-options="employee as employee.strEmpFirstName for employee in employeeList">
<option value="" disabled selected>- Please Choose -</option>
</select>
https://jsfiddle.net/uovcs2dr/
Related
I have this select which i need the default value to be empty, tried adding a option with value="?" and selected="selected" but it wont work, any ideas?
<select class="form-control"
id="Select7"
name="grossweightmeasurementunitcode"
ng-model="itemForm.grossweightmeasurementunitcode"
ng-required="true">
<option ng-repeat="unidadepeso in unidadespeso" value="{{unidadepeso.commoncode}}">{{unidadepeso.sigla}}</option>
</select>
try this:
<select
class="form-control"
id="Select7"
name="grossweightmeasurementunitcode"
ng-model="itemForm.grossweightmeasurementunitcode"
ng-required="true">
<option value="">--Select--</opton>
<option ng-repeat="unidadepeso in unidadespeso" value="{{unidadepeso.commoncode}}">{{unidadepeso.sigla}}</option>
</select>
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 problem in selecting the default value of the select option when I try to load the page,this is my code:
<select ng-model="sortKey" class="ng-valid ng-pristine">
<option value="LastName" selected="selected">Nom</option>
<option value="FirstName">Prenom</option>
<option value="Class">Classe</option>
</select>
I have used the selected="selected" attribute but always I have this problem
Thanks for help
this is a demo:
<select ng-model="sortKey" style="border-radius: 20px;width: 135px;height: 32px;margin-left: 0px;margin-right: 22px;" class="ng-valid ng-dirty ng-pristine">
<option selected value="LastName" >Nom</option>
<option value="FirstName">Prenom</option>
<option value="Class">Classe</option>
</select>
I am trying to create a in AngularJS. Here's what I did so far:
<select ng-model="inverse">
<option value=true>Sort Up</option>
<option value=false selected="selected">Sort Down</option>
</select>
I was trying to set false as the initial value. However when I look at the HTML that's created I see this and the select box does not show "Sort Down" as the default:
<select ng-model="inverse" class="ng-pristine ng-valid">
<option value="? undefined:undefined ?"></option>
<option value="true">Sort Up</option>
<option value="false" selected="selected">Sort Down</option>
</select>
Can someone explain what I am doing wrong.
This works for me:
<select ng-model="inverse">
<option value="true">Sort Up</option>
<option value="false">Sort Down</option>
</select>
Controller:
$scope.inverse = "false";
However, using ng-options is suggested.
Set the value of inverse in the controller using:
$scope.inverse = true;
And remove the selected="selected" attribute from the option.
<select ng-init="inverse='false'" ng-model="inverse">
<option value=true>Sort Up</option>
<option value=false>Sort Down</option>
</select>
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>