I am trying to create dropdown using ng-options, but at edit page its not working.
js file :
$scope.items = [
{name:"Angular"},
{name:"java script"},
{name:"Css3"},
{name:"Html5"},
];
$scope.name= "Css3";
html file :
<div class="form-group">Name</label>
<select class="form-control" ng-model="name" ng-options="a.name for a in items track by a.name" placeholder="Select Item"></select>
</div>
its working fine.
but I got selected value like this :
name:{
name:"selectedValue"
}
but I want like this :
name:"selectedValue"
in $scope.selected after selected value from dropdown.
and I referred this blog
after comparing #Satpal's demo and my output by inspect element and getting this :
my output
<select class="form-control ng-pristine ng-valid" ng-model="name" ng-options="a.name as a.name for a in items" placeholder="Select Item">
<option value="0" selected="selected" label="Angular">Angular</option>
<option value="1" label="java script">java script</option>
<option value="2" selected="selected" label="Css3">Css3</option>
<option value="3">Html5</option>
</select>
Satpal's output:
<select class="form-control ng-pristine ng-valid" ng-model="name" ng-options="a.name as a.name for a in items" placeholder="Select Item">
<option value="0">Angular</option>
<option value="1">java script</option>
<option value="2" selected="selected">Css3</option>
<option value="3">Html5</option>
</select>
Use the following expression of ngOption
select as label for value in array
Code
a.name as a.name for a in items
DEMO
Related
I have a problem with default value in select element.
I have form for create new item and update from table.
Here is my code:
Controller:
function MyController($scope){
$scope.data = {};
$scope.selectedItem = null; //selected row from table
this.edit = function(){
$scope.enableEditation = true; // displayed editation form
$scope.data = $scope.selectedItem
}
}
HTML:
<select required ng-model="data.ID" class="form-control">
<option ng-repeat="option in types" value="{{option.ID}}" ng-selected="option.ID == data.ID">{{option.ID}} - {{option.NAME}}</option>
</select>
Default value is allways empty. Generated html in browser is:
<select class="form-control ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-required" required="" ng-model="data.ID">
<option selected="selected" value="? number:4 ?"></option>
<option class="ng-binding ng-scope" value="4" ng-repeat="option in types" ng-selected="option.ID == data.ID">4 - First</option>
<option class="ng-binding ng-scope" value="12" ng-repeat="option in types" ng-selected="option.ID == data.ID">12 - Last</option>
</select>
Where can be problem? Thanks for advices.
Your problem is that your adding the value to the options trough
"value={{option.id}}"
This will always result in type conflict when your working with non-string values, since doing so will convert your id to a string, your simplest solution is to use "ng-value" instead and give it as reference:
"ng-value="option.id"
You just replace ng-selected="option.ID == data.ID" to ng-selected="data.ID"
<select required ng-model="data.ID" class="form-control">
<option ng-repeat="option in types" value="{{option.ID}}" ng-selected="data.ID">{{option.ID}} - {{option.NAME}}</option>
</select>
See the document https://docs.angularjs.org/api/ng/directive/ngSelected
View Code Show the Drop Down In Client Side--
<select ng-model="employee.DeptId" class="form-control ng-pristine ng-invalid ng-invalid-required" required="">
<option disabled="disabled" value="">---Please Select---</option>
<option ng-repeat="Dep in ShowDep" value="{{Dep.Id}}">{{Dep.Name}}</option>
</select>
Angular Code In Edit Case----
$scope.EmployeeEdit = function (rowNumber) {
args = employeeArr[rowNumber];
$scope.employee.DeptId = args.DeptId;
}
Not clear about the structure of the data your binding.
So here I am showing your requirement with my own data. I think you could do the same in your cod also.
$scope.degrees = [
{"degree_code":"GB","degree_name":"Bachelor of Science"},
{"degree_code":"GR","degree_name":"Non Degree Undergraduate"}
];
$scope.selecteddegree = {degree_code:"GB"};
<!-- html -->
<select name="degree" class="form-control" ng-model="selecteddegree" ng-options="degree.degree_name for degree in degrees track by degree.degree_code" >
<option value=""> Select Degree </option>
</select>
Use ng-value instead of value in option tag.
<select ng-model="employee.DeptId" class="form-control ng-pristine ng-invalid ng-invalid-required" required="">
<option disabled="disabled" ng-value="">---Please Select---</option>
<option ng-repeat="Dep in ShowDep" ng-value="{{Dep.Id}}">{{Dep.Name}}</option>
</select>
I'm having the following script,
<select ng-model="create.Category" class="form-control input-sm" name="category" required>
<option value="" disabled="" selected="">Select Category</option>
<option ng-repeat="cat in categories" value="{{ cat.type }}">{{cat.type}}</option>
</select>
so my controller looks like this (categories is a factory which reaturn my categories to fill the select options, and info is an object instance with the parameters):
app.controller('myCtrl', function($scope, categories, info) {
$scope.categories = categories;
$scope.create = info;
});
so, my select options are filled perfectly, however, the ng-model="create.category" which has a value, is not been selected, it display the first category on the list.
Any guessing?
use ng-selected in select and compare the cat.type with value given
<select ng-model="create.Category" class="form-control input-sm" name="category" required>
<option value="" disabled="" selected="">Select Category</option>
<option
ng-selected="{{create.Category == cat.type}}"
ng-repeat="cat in categories" value="{{ cat.type }}">{{cat.type}}</option>
</select>
The preferred way is to use ngOptions :
https://docs.angularjs.org/api/ng/directive/ngOptions
I need to show the Name instead of Id,now in UI I get Id for Player::::
In EditDialog.Html
<select class="form-control" style="display: inline-block" name="ssDll" ng-model="Rocker.PlayerId" ng-options="p.Id as p.Name for s in Players" required>
<option value="">Select Players</option>
</select>
In app.js File on particular controller :
$scope.Players= [
{ Id : 1, Name : 'Player1' }
];
In main.html when I bind all things to main page :
<td>{{Rocker.PlayerId}} </td>
what should I pass here to get the Player name
You can do it with filter service and little logic.
Controller logic:
$scope.getName=function(id){
console.log(id);
if(!angular.isUndefined(id)){
var result= $filter('filter')($scope.Players, {Id:id})[0];
return result.Name;
}else{
return "";
}
HTML:
<select style="display: inline-block" name="ssDll" ng-model="Rocker.PlayerId" ng-options="s.Id as s.Name for s in Players" required>
<option value="">Select Players</option>
</select>
<td>Filtered out Name {{getName(Rocker.PlayerId)}}!</td>
Plunker
try this.
<select class="form-control" style="display: inline-block" name="ssDll" ng-model="Rocker.Name" ng-options="p.Name as p.Name for p in Players" required>
<option value="">Select Players</option>
</select>
You can do like this.
<select class="form-control" style="display: inline-block" name="ssDll" ng-model="Rocker.Name" ng-options="s.Name as s.Name for s in Players" required>
<option value="">Select Players</option>
</select>
and
<td>{{Rocker.Name}} </td>
This will give you the Name. But in case you want Id itself as the model value, then it is another case. For that you can do the following.
<select class="form-control" style="display: inline-block" name="ssDll" ng-model="Rocker" ng-options="s as s.Name for s in Players" required>
<option value="">Select Players</option>
</select>
Rocker.id will give id and Rocker.Name will give name.
Don't use as and bind the selected player directly
<select class="form-control" style="display: inline-block" name="ssDll"
ng-model="Rocker.selectedPlayer"
ng-options="p.Name for p in Players"
required>
<option value="">Select Players</option>
</select>
and show it as
<td>Selected player name {{Rocker.selectedPlayer.Name}} with id {{Rocker.selectedPlayer.Id}}</td>
I have a <select>-Element where the enclosed <option>-Tags are created with ng-repeat.
One of these option-Tags shall have the selected-attribute added, depending on a value, but I can't figure it out how to deploy the attribute in only one option.
This is the base code:
<select name="level" ng-model="srv.level">
<option ng-repeat="level in DataService.getLevels()"
value="{{level.id}}">{{level.name}}</option>
</select>
and the result is already:
<select ng-model="srv.level" name="level" class="ng-pristine ng-valid">
<option value="0" ng-repeat="level in DataService.getLevels()"
class="ng-scope ng-binding">Level Zero</option>
<option value="1" ng-repeat="level in DataService.getLevels()"
class="ng-scope ng-binding">Level Uno</option>
<option value="2" ng-repeat="level in DataService.getLevels()"
class="ng-scope ng-binding">Level Two</option>
</select>
Now I want that one of the option-Tags has the attribute selected depending on level.id === srv.level. How can I do that?
Here is a link to a plunker
Thank you!
http://plnkr.co/edit/uwruchg1JjGib6dT4QB9?p=preview
<select name="level" ng-model="srv.level.id" ng-options="level.id as level.name for level in data.getLevels() ">
<option value='0'>--choose level--</option>
</select>
Try <option ng-selected='level.id === srv.level'></option>.
Thus, the option will be selected only if the predicate in ng-selected is true.