CODEWITHSUNDEEP
angularjsangularjs-scopeng-optionsangularjs-select
Vasanth Kumar
Vasanth Kumar

Reputation: 11

Unable to set default value for angularjs select when using watch

View

<select  ng-options="department.name for department in departmentsList track by department.departmentID"
         ng-model="editAllocate.department">
</select>

<select  ng-options="position.name for position in positionsList track by position.positionID"
         ng-model="editAllocate.position">
</select>

departmentsList

departmentsList[0].departmentID = 1
departmentsList[0].name= 'Accounts'
departmentsList[1].departmentID = 2
departmentsList[1].name= 'Sales'
departmentsList[2].departmentID = 3
departmentsList[2].name= 'Service'
departmentsList[3].departmentID = 4
departmentsList[3].name= 'Management'

Positions List

    positionsList[0].positionID = 1
    positionsList[0].departmentID = 1
    positionsList[0].name = 'Junior Accountant'
    positionsList[1].positionID = 2
    positionsList[1].departmentID = 1
    positionsList[1].name = 'Senior Accountant'
    positionsList[2].positionID = 3
    positionsList[2].departmentID = 2
    positionsList[2].name = 'Sales Executive'
    positionsList[3].positionID = 4
    positionsList[3].departmentID = 2
    positionsList[3].name = 'Sales Officer'
    positionsList[4].positionID = 5
    positionsList[4].departmentID = 3
    positionsList[4].name = 'Service Supervisor'
    positionsList[5].positionID = 6
    positionsList[5].departmentID = 3
    positionsList[5].name = 'Service Engineer'
    positionsList[6].positionID = 7
    positionsList[6].departmentID = 4
    positionsList[6].name = 'Administrator'
    positionsList[7].positionID = 8
    positionsList[7].departmentID = 4
    positionsList[7].name = 'Manager'

When I edit position Sales Executive, I need to set department select value as 'Sales', and position select value as 'Sales Executive' as default.

I can load positionsList according to change of department select, by using watch in angularjs.

In watch,

$scope.$watch('editAllocate.department', function()
{
     $http(
         {  method:'post',
            dataType : 'json',
            url:'<?php echo base_url()?>EditEmployee/getPositionsListForSelectedDepartment',
            data : empDepartment,
            headers : {'Content-Type': 'application/json'} 
         }).then(function mySuccess(response)
        {
            $scope.positionsList = response.data;

            $scope.editAllocate.position = $scope.positionsList[0];
});

i.e, When i change department select, respective positionList automatically load in positionsList select and first position set as selected position.

But, When i use watch, I'm unable to set default value in departmentList select & positionsList select.

i.e, If i want to edit 3rd value of department in departmentsList (departmentsList[2]), I need to set default selected value as departmentList[2] and set respective position as default position in position select (for example set dfefault as positionsList[4].

But, When I use watch, I'm unable to set default select option. When I use watch, default value being always as departmentList[0] and positionsList[0].

When i change only, default value change to departmentsList[0] and positionsList[0].

When without change any select option, select options should be in default values. i.e. departmentsList[2] and positionsList[4].

How can i set default value? and How can i set watch? In angular JS 1.6.

. . . . . . . .

Upvotes: 1

Views: 211

Answers (1)

georgeawg
georgeawg

Reputation: 48968

Avoid using $watch. Instead use the ng-change directive:

<select  ng-options="department.name for department in departmentsList track by department.departmentID"
         ng-model="editAllocate.department" ng-change="updatePositionList()">
</select>

Then set the default from the controller:

$scope.positionList = <default>;

̶$̶s̶c̶o̶p̶e̶.̶$̶w̶a̶t̶c̶h̶(̶'̶e̶d̶i̶t̶A̶l̶l̶o̶c̶a̶t̶e̶.̶d̶e̶p̶a̶r̶t̶m̶e̶n̶t̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶
$scope.updatePositionList = function()
{
     $http(
         {  method:'post',
            dataType : 'json',
            url:'<?php echo base_url()?>EditEmployee/getPositionsListForSelectedDepartment',
            data : empDepartment,
            headers : {'Content-Type': 'application/json'} 
         }).then(function mySuccess(response)
        {
            $scope.positionsList = response.data;

            $scope.editAllocate.position = $scope.positionsList[0];
        });
};

The initial value is set by the controller and updated when the user changes selection.

Upvotes: 0

Related Questions