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>
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>
<input type="text" ng-model= "name" title="{{name}}">//this title shows name what ng-model contains
In the same way...
<select title ="{{item.actionId}}" ng-model="item.actionId">
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
actionList:-
$scope.actionList = [{
"ACTION_ID": 39,
"URL": "/abc"
}, {
"ACTION_ID": 59,
"URL": "/xyz"
}];
Here item is the parent list. I am getting title as it's id as the value is id.
Here I want to get the corresponding url. How can I get the url.
The JSON data and the code looks fine, Check the demo below if you have missed anything.
DEMO
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
$scope.actionList = [{
"ACTION_ID": 39,
"URL": "/abc"
}, {
"ACTION_ID": 59,
"URL": "/xyz"
}];
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<div class="form-group">
<select title ="{{item.actionId}}" ng-model="item.actionId">
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
</div>
</div>
</body>
</html>
You can use ng-options along with ng-change to capture the ids and show url on title
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.actionList = [{
"ACTION_ID": 39,
"URL": "/abc"
}, {
"ACTION_ID": 59,
"URL": "/xyz"
}];
$scope.getValues=function(){
debugger
$scope.selectedID=$scope.item.ACTION_ID;
$scope.selectedURL=$scope.item.URL;
console.log("selectedId:" + $scope.selectedID );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div ng-app="app" ng-controller="Ctrl">
<div class="form-group">
<select ng-model="item" ng-change="getValues()" ng-options="action as action.URL for action in actionList" title="{{selectedURL}}">
</select>
</div>
</div>
</body>
</html>
You can simply do like below code:
<select ng-model="item" ng-options="action as action.URL for action in
actionList" title="{{item.URL}}">
You should use ng-option instead of ng-repeat. always use track by clause to set value in option list when creating from object
<!DOCTYPE html>
<html>
<body>
<select ng-model="item" ng-options="action as action.URL for action in actionList track by action.URL" >
<option value="">Volvo</option>
</select>
</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 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 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