I am using ng-repeat to simple put down options from an array. Though, I hope I am doing it alright I am not able to see any options in the dropdown of select options. Can someone help me find the error?
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.Country = [
"India","Pakistan","Germany"
];
});
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in Country"></option>
</select>
</body>
</html>
Try this:::
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-model ="selectedCountry">
<option ng-repeat="x in Country" value = "{{x}}"> {{x}} </option>
</select>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.Country = [
"India","Pakistan","Germany"
];
});
</script>
</body>
</html>
You are actually not printing any value into option element, you should try like below.
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select>
<option ng-repeat="x in Country" value="{{x.id}}">{{x.name}}</option>
</select>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.Country = [
{"id":"1","name":"India"},
{"id":"2","name":"Pakistan"},
{"id":"3","name":"Germany"}
];
});
</script>
</body>
</html>
Use ng-options instead of using ng-repeat with select tag:
<select ng-options="x for x in country" ng-model="selectedCountry"> </select>
yes you didn't use {{x}} this value that is the reason it's not working for you , it may be ng-options or option anything any thing you can use ...
Use ng-options instead of using ng-repeat with select tag:
My solution is tested and valided:
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select ng-options="option.name for option in Country track by option.id" ng-model="selectedCountry">
<option value="">All</option>
</select>
ID: {{selectedCountry.id}} and NAME: {{selectedCountry.name}}
<script>
var myApp = angular.module("myApp", []);
myApp.controller('myCtrl', function($scope) {
$scope.selectedCountry="";
$scope.Country = [
{"id":"1","name":"India"},
{"id":"2","name":"Pakistan"},
{"id":"3","name":"Germany"}
];
});
</script>
</body>
</html>
DEMO in Plunker
Related
This is my custom json data
{0: {'Married Status': {'M', '', 'S'}}, 1: {'COMNCTN_IND': {'', 'OFC', 'RES', 'PGR'}}}
I have tried this,
Code:
<select ng-model="ddldates" ng-options="number.dates for number in dates">
</select>
</div>
</body>
<script>
angular.module("myApp", [])
.controller('myController', function ($scope, $filter) {
$scope.dates=[{0: {'Married Status': {'M', '', 'S'}}, 1: {'COMNCTN_IND': {'', 'OFC', 'RES', 'PGR'}}}];
});
</script>
How to add drop down? Please help.
I want to what should I write in ng option for my data
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="ddldates">
<option ng-repeat="item in dates.married_status">{{item.status}}</option>
</select>
<select ng-model="ddldates2">
<option ng-repeat="item in dates.COMNCTN_IND">{{item.comm_ind}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dates={};
$scope.dates.married_status =[{status:"M"}, {status:""}, {status:"S"}];
$scope.dates.COMNCTN_IND =[{comm_ind:""}, {comm_ind:"OFC"}, {comm_ind:"RES"}, {comm_ind:"PGR"}];
console.log($scope.dates);
});
</script>
</body>
</html>
not sure what you are trying to do.
try this.
TLDR:
$scope.dates={};
$scope.dates.married_status=[{status:"M"}, {status:""}, {status:"S"}];
$scope.dates.COMNCTN_IND=[{comm_ind:""}, {comm_ind:"OFC"}, {comm_ind:"RES"}, {comm_ind:"PGR"}];
<select ng-model="ddldates">
<option ng-repeat="item in dates.married_status">{{item.status}}</option>
</select>
<select ng-model="ddldates2">
<option ng-repeat="item in dates.COMNCTN_IND">{{item.comm_ind}}</option>
</select>
Full code.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="ddldates">
<option ng-repeat="item in dates.married_status">{{item.status}}</option>
</select>
<select ng-model="ddldates2">
<option ng-repeat="item in dates.COMNCTN_IND">{{item.comm_ind}}</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.dates={};
$scope.dates.married_status =[{status:"M"}, {status:""}, {status:"S"}];
$scope.dates.COMNCTN_IND =[{comm_ind:""}, {comm_ind:"OFC"}, {comm_ind:"RES"}, {comm_ind:"PGR"}];
console.log($scope.dates);
});
</script>
</body>
</html>
I have one simple drop down here.Here by default I need to show Tobias as selected.How to do it?
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
<option selected="selected">Tobias</option>
</select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
</body>
This is what am trying in my original code.
<select><option value="" selected="selected">{{data.LeaveType}}</option><option data-ng-repeat="data in leaveTypes" value="{{data.id}}">{{data.Name}}</option></select>
//Here data.LeaveType is other method(getting selected option from backend)
//data in leaveTypes -to load drop down data
Just set default value using ng-init
<select ng-model="selectedName" ng-init="selectedName=='Tobias'" ng-options="x for x in names">
DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello AngularJS</title>
</head>
<body ng-controller="myCtrl">
<select ng-model="selectedName" ng-init="selectedName='Tobias'"
ng-options="x for x in names"></select>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
</body>
</html>
I think leaveTypes value you are using is of object type ,where you want to display name but select id, for these kind of scenarios use ngOptions instead of ngRepeat
and modify your select as below, I had assigned id 2 for Tobias
<select ng-model="selectedName" ng-init="selectedName=2" ng-options="data.id as data.name for data in leaveTypes"></select>
Please check below plunker for demo
https://plnkr.co/edit/GWsXGohTr6jvG67CY00D?p=preview
Set default value for your ng-model object with using ng-value
<select ng-model="selectedName" ng-value="{{selectedName='Tobias'}}"
ng-options="x for x in names">
You can also default set selectedName in your controller:
$scope.selectedName = 'Tobias';
So in your view:
<select ng-model="selectedName" ng-options="x for x in names">
In my opinion, it is cleaner than setting it the view with ng-init, in order to keep the logic in the controller.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selectedName = 'Tobias';
$scope.names = ["Emil", "Tobias", "Linus"];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names"></select>
</div>
You can assign your ng-model to the default value.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$scope.selectedName="Tobias";
});
Working Plunker:https://plnkr.co/edit/cVaX1VdwFqAh8MoanNJS?p=preview
I'm trying to bind data to select drop down using AngularJS ng-repeat directive but it's showing an empty data on page load. How to remove the empty item.
Here is the code:
<html>
<head>
</head>
<body ng-app="app">
<div ng-controller="homeCtrl">
<select ng-model="selected">
<option ng-repeat="item in items" value="{{item.id}}">
{{item.name}}
</option>
</select>
<span>
{{selected}}
</span>
</div>
</body>
</html>
Here is the JS code:
var app = angular.module('app',[]);
app.controller('homeCtrl',['$scope',function($scope){
$scope.selected = 1;
$scope.items=[
{name: 'harry111',id:1},
{name: 'rimmi',id:2}
];
}]);
Here is a DEMO
make $scope.selected = 1; as $scope.selected = "1"; it will default select a value
var app = angular.module('app',[]);
app.controller('homeCtrl',['$scope',function($scope){
$scope.selected = "1";
$scope.items=[
{name: 'harry111',id:1},
{name: 'rimmi',id:2}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
</head>
<body ng-app="app">
<div ng-controller="homeCtrl">
<select ng-model="selected">
<option ng-repeat="item in items" value="{{item.id}}">
{{item.name}}
</option>
</select>
<span>
{{selected}}
</span>
</div>
</body>
</html>
You need to include ng-repeat on <select> tag like this
<html>
<head>
</head>
<body ng-app="app">
<div ng-controller="homeCtrl">
<select ng-model="selected" ng-options="value.id as value.name
for (key,value) in items"
></select>
<span>
{{selected}}
</span>
</div>
</body>
</html>
This will not add the blank option in the select dropdown. Here is the working CODEPEN
Use ng-options instead,
ng-options="value.id as value.name for (key,value) in items"
DEMO
var app = angular.module('app',[]);
app.controller('homeCtrl',['$scope',function($scope){
$scope.items=[
{name: 'harry111',id:1},
{name: 'rimmi',id:2}
];
$scope.selected = $scope.items[0].id;
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head>
</head>
<body ng-app="app">
<div ng-controller="homeCtrl">
<select ng-model="selected" ng-options="value.id as value.name
for (key,value) in items"
></select>
<span>
{{selected}}
</span>
</div>
</body>
</html>
I am working on an app where I am facing this similar issue. I am dynamically creating select boxes based on API response. I dont understand how to bind these values in controller. Code for reference is
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// how to get values of input boxes here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model= "What_Should_Go_Here" ng-repeat="x in [10,11,22,33]">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
{{What_Should_Go_Here}}
</div>
Initialize an empty object selected = {}
Then, loop the select boxes using ng-repeat, and inside each select box, use ng-options to get the options for the select.
Now, for each selected value from every select, ng-model="selected[y]" pushes the current select value into selected object with the key of select tag.
So, after selecting all the selects, the selected object looks loke,
{"1":11,"2":10,"3":22,"4":22}
Please run the below Code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selected[y]" ng-options="x for x in data" ng-repeat="y in selects" ng-change="selectedFunc(y)">
</select>
<br><br>
Selected Values: {{selected}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selected = {};
$scope.selects = [1,2,3,4]
$scope.data = [10,11,22,33]
$scope.selectedFunc = function(y)
{
alert($scope.selected[y])
}
});
</script>
</body>
</html>
Here is a working DEMO
use a select box with ng-change method and pass the model value to that change function like below.....so that you can access the selected item in js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.array=[10,11,22,33];//assuem it as your db result
$scope.fix=function(val){
console.log(val);
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model= "x" ng-options="x as x for x in array" ng-change="fix(x)"</select>
{{x}}
</body>
</html>
I have the following select:
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}">
<option ng-repeat="One_Language in Languages_List"
value="{{One_Language.Code}}"
ng-selected="One_Language.Code == current_Language">
{{One_Language.Name}}
</option>
</select>
Now, current_Language is a $rootScope variable with a value (e.g. "EN"). I want the select element to display the selected value instead of the very first. What am I doing wrong?
One more note: I know that I could use ng-click, but I don't think this is the source of the issue.
Thanks.
Check this snippet:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $rootScope) {
$scope.Labels = {Change_Language_Tooltip: "change lang"};
$scope.Languages_List = [
{ name: 'English', Code: 'en' },
{ name: 'Espanol', Code: 'es' },
{ name: 'Italian', Code: 'it' }];
$rootScope.current_Language = $scope.Languages_List[1];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>selected item is : {{current_Language}}</p>
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}"
ng-options="item.name for item in Languages_List track by item.Code"
ng-model="current_Language">
</select>
</body>
</html>
PS: the selected item (default or initial) must be one element of the items used in the ngOptions list