CODEWITHSUNDEEP
angularjs
Dhruv Thakkar
Dhruv Thakkar

Reputation: 1

get value of selected item in controller in angularjs

i don't get value of the selected item in controller

Html file

<select data-ng-model="Employee" data-ng-options="c.Id as c.FirstName for c in Employees" ng-change="sortData()">
    <option value="">-- Select Employee Name --</option>
</select>

controller.js

$scope.sortData = function ()
{
    alert($scope.Employee);
};

How can i get the value of the selected Employee?

Upvotes: 0

Views: 140

Answers (2)

Vaibhav Pachauri
Vaibhav Pachauri

Reputation: 2671

The problem is occurring because the selected value is not able to update the scope. So, to tackle this, you can pass the selected value in you ng-change method as argument and update the scope as following :

HTML :

<select data-ng-model="employee" 
        data-ng-options="c.Id as c.FirstName for c in Employees" 
        ng-change="sortData(c)">
    <option value="">-- Select Employee Name --</option>
</select>

Controller : 

$scope.sortData = function (selectedEmployee)
{
    $scope.employee = selectedEmployee;
    alert($scope.employee);
};

I hope this will do the trick.

Upvotes: 1

carton
carton

Reputation: 1168

So you could use $scope.$watch which will return you the object you selected :

In your html :

    <select ng-model="Employee" ng-options="c as c.FirstName for c in Employees" >
        <option value="">-- Select Employee Name --</option>
    </select>

In your controller :

  $scope.Employees= [{Id:1,FirstName:'jean'},{Id:2,FirstName:'Bernard'}]; // I took this data Exemple but change it like you need 


   $scope.$watch('Employee',function(newEmp){
    console.log(newEmp.FirstName); // Display the FirstName
    // Or alert :    alert(newEmp.FirstName);

  });

Working codePen

Upvotes: 0

Related Questions