Angularjs Dropdown OnChange Selected Text and Value
Solution 1
That's because, your model itemSelected
captures the current value of your select drop down which is nothing but the value
attribute of your option
element. You have
<option ng-repeat="category in categories" value="{{category.id}}">
in your code, so in the rendered version, you'll get
<option ng-repeat="category in categories" value="0">
but you're expecting itemSelected
to be your category object and any attempt to query id
or other property will return undefined
.
You can use ng-options
with group by
with little bit of change to your data or you can use normal ng-repeat
, get the selectedIndex and lookup the category object from your categories list using that index. Showcasing the first approach here.
HTML
<select name="category-group" id="categoryGroup"
ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)"
ng-options="category.name group by category.group for category in categories">
</select>
Updated Data
$scope.categories = [
{ id: 0, name: "Select a category..."},
{ id: 1, name: "Cars", group : "- Vehicles -" },
{ id: 2, name: "Commercial vehicles", group : "- Vehicles -" },
{ id: 3, name: "Motorcycles", group : "- Vehicles -" }
];
$scope.itemSelected = $scope.categories[0];
Instead of disabled property, you can add a group
property which can be used in group by
.
Here' an updated Fiddle to illustrate the idea.
Solution 2
You should use ng-options
to set object to your ng-model
value on change of you select options.
Markup
<select name="category-group" id="categoryGroup" class="form-control"
ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)"
ng-options="category.name for category in categories">
<option value="0">Select a category...</option>
</select>
Update
For persisting style you have to use ng-repeat
there, in that case you will only have id
binded to your ng-model
and while retrieving whole object you need to filter your data.
$scope.onCategoryChange = function () {
var currentSelected = $filter('filter')($scope.categories, {id: $scope.itemSelected})[0]
$window.alert("Selected Value: " + currentSelected.id + "\nSelected Text: " + currentSelected.name);
};
Solution 3
<div ng-app="SelectApp">
<div ng-controller="selectController">
<select ng-change='onCategoryChange()' ng-model="itemSelected" ng-options="category.name for category in categories">
<option value="">-- category --</option>
</select>
</div>
//http://jsbin.com/zajipe/edit?html,js,output
Solution 4
A little change in your onCategoryChange()
should work:
$scope.onCategoryChange = function () {
$window.alert("Selected Value: " + $scope.categories[$scope.itemSelected - 1].id + "\nSelected Text: " + $scope.categories[$scope.itemSelected -1].name);
};
JSFiddle: http://jsfiddle.net/Qgmz7/144/
Solution 5
ngChange
only returns the value of your selected option and that's why you don't get the whole data.
Here's a working solution without changing your markup logic.
Markup:
<select
name="category-group"
id="categoryGroup"
class="form-control"
ng-model="id"
ng-change="onCategoryChange(id)">
ngChange handler:
$scope.onCategoryChange = function (id) {
//get selected item data from categories
var selectedIndex = $scope.categories.map(function(obj) { return obj.id; }).indexOf( parseInt(id) );
var itemSelected = $scope.categories[selectedIndex];
$window.alert("Selected Value: " + itemSelected.id + "\nSelected Text: " + itemSelected.name);
};
Another solution (little bit dirty) would be to change only the value
of your options into something like this:
<option .... value="{{category.id}}|{{category.name}}">
...and inside your actual ngChange handler, just split the value to get all the values as an array:
$scope.onCategoryChange = function (itemSelected) {
$scope.itemSelected = itemSelected.split('|'); //string value to array
$window.alert("Selected Value: " + $scope.itemSelected[0] + "\nSelected Text: " + $scope.itemSelected[1]);
};
Usman Khalid
My name is Usman Khalid. I did Masters in Computer Science in 2009 and since then I have been working as a Software Engineer using technologies like ASP.NET, C#, VB.NET, Windows Azure, Amazon Web Services, JavaScript, JQuery, SQL Server, MySQL etc. I like to know more and more about new things and I like to search for new questions and then find answers for those questions.
Updated on September 30, 2020Comments
-
Usman Khalid over 3 years
I am new to
AngularJS
and trying to get Selected Text and Value fromDropdown
. I followed a lot of tutorials with still unable to get there.SelectedValue
andSelectedText
are alwaysundefined
. Below is my code:Html:
<div ng-app="SelectApp"> <div ng-controller="selectController"> <select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)"> <option value="0">Select a category...</option> <option ng-repeat="category in categories" value="{{category.id}}" ng-disabled="category.disabled" ng-class="{'mainCategory' : category.disabled}"> {{category.name}} </option> </select> </div>
Js:
'use strict'; var app = angular.module('SelectApp', [ ]); app.controller('selectController', ['$scope', '$window', function ($scope, $window) { $scope.categories = [ { id: 1, name: "- Vehicles -", disabled: true }, { id: 2, name: "Cars" }, { id: 3, name: "Commercial vehicles", disabled: false }, { id: 4, name: "Motorcycles", disabled: false }, { id: 5, name: "Car & Motorcycle Equipment", disabled: false }, { id: 6, name: "Boats", disabled: false }, { id: 7, name: "Other Vehicles", disabled: false }, { id: 8, name: "- House and Children -", disabled: true }, { id: 9, name: "Appliances", disabled: false }, { id: 10, name: "Inside", disabled: false }, { id: 11, name: "Games and Clothing", disabled: false }, { id: 12, name: "Garden", disabled: false } ]; $scope.onCategoryChange = function () { $window.alert("Selected Value: " + $scope.itemSelected.id + "\nSelected Text: " + $scope.itemSelected.name); }; }]);
And one more thing, I have defined my first item as
Select a category...
then Why first item in Dropdown is always empty.Below is my fiddle sample. http://jsfiddle.net/Qgmz7/136/
-
Usman Khalid almost 9 yearsIt works but my css logic is gone. If you see my sample. - Vehicles - and - House and Children - are disabled and using different css.
-
Pankaj Parkar almost 9 years@UsmanKhalid take a look at updated fiddle..which will work as you want
-
Arkantos almost 9 yearsThis example will keep the group headers using
optgroup
in select element rendered bygroup by
clause inng-options
. Hope this helps :) -
Usman Khalid almost 9 yearsThanks a lot. It is working fine but why dropdown is empty for the first time?
-
Pankaj Parkar almost 9 yearsare you crazy to that..how come
$scope.categories[$scope.itemSelected]
will select a value fromcategories
? -
Usman Khalid almost 9 yearsthat's good solution but why dropdown is empty for the first time.
-
Arkantos almost 9 yearsThat's because we've not set any default value for
itemSelected
in our controller. Add your default value to your categories list and set that value as shown here -
Usman Khalid almost 9 yearsThanks a lot Ankantos. Very good solution and something new to learn. :)
-
Arkantos almost 9 yearsGlad to be of help :)
-
ArBro almost 9 years$scope.itemSelected Will return the value (as a Number) of the selected item in the option list. By passing it to the object You are able to select the n-property of the object and you will have access to the data.
-
Pankaj Parkar almost 9 yearscould you please look at your fiddle it is showing wrong value as its considering index of an array
-
ArBro almost 9 yearsUpdated the code. It should output the right values now.
-
Pankaj Parkar almost 9 yearsNo dude that could harm..if suppose you have skipped one/two element id and then took third one..then
$scope.itemSelected - 1
will won't work..