cascading dropdown angularjs mvc

Question

i am getting null values

 $scope.GetDepartment = function (Department) {
        $http.get('/Official/GetDepartment?Department=' + Department).then(function (data) {
            console.log(data);
            $scope.department= data.data;
        });
    };

Html

  <select ng-model="empModel.division" id="" name="Division" class="form-control"   
                                ng-click = "GetDepartment(empModel.division)"  
                                ng-change = "GetDepartment(empModel.division)"
                                ng-options="c.division as c.division for c in division" >
                            <option selected="selected">Select</option>
                        </select>

 <select ng-model="empModel.department" id="" name="Department" class="form-control"
                                    ng-options="d.department as d.department for d in department">
                                <option></option>
                            </select>

When i select divison i am not getting anything in department dropdown Controller

  public JsonResult GetDepartment(string Department)
    {
        var department = db.Depts.Where(x => x.Department == Department).
            GroupBy(x => x.Department).
            Select(x => x.FirstOrDefault()).
            OrderBy(x => x.Department).ToList();

        return Json(department);
    }

Newaz Sharif · Accepted Answer · 2018-02-10 12:40:07Z

1

Your angular part for retrieve division data

    function GetDesignation(input) {
        $http.get('/Official/GetDesignation?designation='+input).then(function (data) {
            console.log(data);
            $scope.designation = data.data;
        });

    };

change in HTML using ng-change directive there

  <select ng-model="empModel.division" id="" name="Division" class="form-control" ng-change = "GetDesignation(empModel.division)"
                                    ng-options="c.division as c.division for c in division" >
                                <option></option>
                            </select>

New HTML tag for load Designation data in dropdown

  <select ng-model="empModel.designation" id="" name="Designation" class="form-control" 
                                    ng-options="c.designation as c.designation for c in designation" >
                                <option></option>
                            </select>

answered Feb 10, 2018 at 12:40

Newaz Sharif

4244 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

Waqas Rauf Over a year ago

what will html code for designation? is it same like division?

Newaz Sharif Over a year ago

yes actually almost same. you have to bind that variable designation instead of division, that the diff here.

Waqas Rauf Over a year ago

i have just added code that you provide me its still not working and i find out that when i change division its not calling my controller /Official/GetDesignation ??

Newaz Sharif Over a year ago

if this answer is useful for you can it get the accepted and a upvote so that other people will be able to use it also?

Waqas Rauf Over a year ago

perfect its all good if i have any other question i will post new one thanks a lot

|

Collectives™ on Stack Overflow

cascading dropdown angularjs mvc

1 Answer 1

16 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

16 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related