Angularjs OnChange popup window Selected text and value

Question

I am new to AngularJS and trying to get the selected text and value from Dropdown . I followed a lot of textbooks that still couldn't get there. SelectedValue and SelectedText always undefined . 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 defined my first element as Select a category... , why the first element in Dropdown is always empty.

Below is my sample violin. http://jsfiddle.net/Qgmz7/136/

Answer 1

This is because your itemSelected model captures the current value of your drop-down list, which is nothing more than the value attribute of your option element. You

 <option ng-repeat="category in categories" value="{{category.id}}"> 

in your code, so in the render version you get

 <option ng-repeat="category in categories" value="0"> 

but you expect itemSelected be your category object, and any attempt to request an id or other property will return undefined .

You can use ng-options with group by with a slight change to your data or you can use regular ng-repeat , get selectIndex and find a category object from the list of categories using this index. The first approach is shown 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 the disabled property, you can add the group property, which can be used in group by .

An updated Fiddle is shown here to illustrate this idea.

Answer 2

You must use ng-options to set the object to ng-model when changing the options you select.

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> 

Fiddle here

Update

For persisting style, you should use ng-repeat there, in this case you will only have id attached to your ng-model , and when extracting the whole object you will 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); }; 

Updated Fiddle

Answer 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

Answer 4

A small 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/

Answer 5

ngChange returns only the value of the parameter you selected and why you are not getting all the data.

Here's a working solution without changing the 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 (a bit dirty) would be to change only the value your parameters 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]); }; 

Answer 6

Here is a very simple and simple code. What I did

 <div ng-app="myApp" ng-controller="myCtrl"> Select Person: <select ng-model="selectedData"> <option ng-repeat="person in persons" value={{person.age}}> {{person.name}} </option> </select> <div ng-bind="selectedData">AGE:</DIV> <br> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl',myCtrlFn); function myCtrlFn($scope) { $scope.persons =[ {'name': 'Prabu','age': 20}, {'name': 'Ram','age': 24}, {'name': 'S','age': 14}, {'name': 'P','age': 15} ]; } </script>