Issues in getting a value of a key from an object using md-select AngularJs 1.X.X

Question

I'm having an issue in getting a Value of a Key from an Object which is selected using md-select in a AngularJs application (Version 1.XX).

I having a two drop downs " Department " and " Designation ". Initially I loaded the Department and based on Department selection, the Designation will auto populate. Kindly have a look into the JSON object

{
   "Status":true,
   "Message":"",
   "Result":[
      {
         "DepartmentId":1,
         "Name":"Bala",
         "Designation":[
            {
               "DesignationId":1,
               "DepartmentId":1,
               "Name":"Software Engg"
            },
            {
               "DesignationId":3,
               "DepartmentId":1,
               "Name":"Sr. Human Resouce"
            },
            {
               "DesignationId":2,
               "DepartmentId":1,
               "Name":"Sr. Software Engg"
            }
         ]
      },
      {
         "DepartmentId":2,
         "Name":"Dev",
         "Designation":[

         ]
      },
      {
         "DepartmentId":3,
         "Name":"HR Team",
         "Designation":[

         ]
      },
      {
         "DepartmentId":4,
         "Name":"Sales",
         "Designation":[
            {
               "DesignationId":4,
               "DepartmentId":4,
               "Name":"Sr. Sales Manager"
            }
         ]
      }
   ]
}

Kindly have a look the code

 <!DOCTYPE html> <html> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-messages.min.js"></script> <!-- Angular Material Library --> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script> <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>Department:</p> <md-select ng-model="select.Department" tabindex="9" ng-change="onChange(select.Department)"> <md-option ng-repeat="key in loadUpData.Department" value="{{key}}">{{key.Name}}</md-option> </md-select> <p>Department ID:</p> <md-input-container class="md-block"> <input type="text" ng-model="select.Department.DepartmentId" maxlength="300" tabindex="32" /> </md-input-container> <br/> <p>Designation:</p> <md-select ng-model="select.Designation" tabindex="9"> <md-option ng-repeat="key in designationData" value="{{key}}">{{key.Name}}</md-option> </md-select> <p>Designation ID:</p> <md-input-container class="md-block"> <input type="text" ng-model="select.Designation.DesignationId" maxlength="300" tabindex="32" /> </md-input-container> </div> <script> var app = angular.module('myApp', ['ngMaterial']); app.controller('myCtrl', function($scope) { $scope.loadUpData = { Department: angular.fromJson("{" + " \\"Status\\":true," + " \\"Message\\":\\"\\"," + " \\"Result\\":[" + " {" + " \\"DepartmentId\\":1," + " \\"Name\\":\\"Bala\\"," + " \\"Designation\\":[" + " {" + " \\"DesignationId\\":1," + " \\"DepartmentId\\":1," + " \\"Name\\":\\"Software Engg\\"" + " }," + " {" + " \\"DesignationId\\":3," + " \\"DepartmentId\\":1," + " \\"Name\\":\\"Sr. Human Resouce\\"" + " }," + " {" + " \\"DesignationId\\":2," + " \\"DepartmentId\\":1," + " \\"Name\\":\\"Sr. Software Engg\\"" + " }" + " ]" + " }," + " {" + " \\"DepartmentId\\":2," + " \\"Name\\":\\"Dev\\"," + " \\"Designation\\":[" + " ]" + " }," + " {" + " \\"DepartmentId\\":3," + " \\"Name\\":\\"HR Team\\"," + " \\"Designation\\":[" + " ]" + " }," + " {" + " \\"DepartmentId\\":4," + " \\"Name\\":\\"Sales\\"," + " \\"Designation\\":[" + " {" + " \\"DesignationId\\":4," + " \\"DepartmentId\\":4," + " \\"Name\\":\\"Sr. Sales Manager\\"" + " }" + " ]" + " }" + " ]" + "}").Result }; $scope.Select = { Department: {}, Designation: {} }; $scope.onChange = function(selected) { var Designation = JSON.parse(selected).Designation; console.log(Designation); $scope.designationData = Designation; }; }); </script> </body> </html>

I'm trying to display the DepartmentId and DesignationId of a Selected Item, but I can't able to get the Id's. Kindly assist me.

Answer 1

Two main things needed fixing:

You define $scope.Select = ... in your controller but try to reference it with ng-model="select.Department" in the view. JavaScript/Angular is case-sensitive so Select !== select - make sure to reference variables with the same case.
On the <md-option> elements use ng-value="key" instead of value="{{key}}" when you want to bind an object value to the control. With this fixed you don't need JSON.parse(...) in the onChange handler.

With these two changes here is the updated code:

  <!DOCTYPE html> <html> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-messages.min.js"></script> <!-- Angular Material Library --> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script> <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>Department:</p> <md-select ng-model="select.Department" tabindex="9" ng-change="onChange(select.Department)"> <md-option ng-repeat="key in loadUpData.Department" ng-value="key">{{key.Name}}</md-option> </md-select> <p>Department ID:</p> <md-input-container class="md-block"> <input type="text" ng-model="select.Department.DepartmentId" maxlength="300" tabindex="32" /> </md-input-container> <br/> <p>Designation:</p> <md-select ng-model="select.Designation" tabindex="9"> <md-option ng-repeat="key in designationData" ng-value="key">{{key.Name}}</md-option> </md-select> <p>Designation ID:</p> <md-input-container class="md-block"> <input type="text" ng-model="select.Designation.DesignationId" maxlength="300" tabindex="32" /> </md-input-container> </div> <script> var app = angular.module('myApp', ['ngMaterial']); app.controller('myCtrl', function($scope) { $scope.loadUpData = { Department: angular.fromJson("{" + " \\"Status\\":true," + " \\"Message\\":\\"\\"," + " \\"Result\\":[" + " {" + " \\"DepartmentId\\":1," + " \\"Name\\":\\"Bala\\"," + " \\"Designation\\":[" + " {" + " \\"DesignationId\\":1," + " \\"DepartmentId\\":1," + " \\"Name\\":\\"Software Engg\\"" + " }," + " {" + " \\"DesignationId\\":3," + " \\"DepartmentId\\":1," + " \\"Name\\":\\"Sr. Human Resouce\\"" + " }," + " {" + " \\"DesignationId\\":2," + " \\"DepartmentId\\":1," + " \\"Name\\":\\"Sr. Software Engg\\"" + " }" + " ]" + " }," + " {" + " \\"DepartmentId\\":2," + " \\"Name\\":\\"Dev\\"," + " \\"Designation\\":[" + " ]" + " }," + " {" + " \\"DepartmentId\\":3," + " \\"Name\\":\\"HR Team\\"," + " \\"Designation\\":[" + " ]" + " }," + " {" + " \\"DepartmentId\\":4," + " \\"Name\\":\\"Sales\\"," + " \\"Designation\\":[" + " {" + " \\"DesignationId\\":4," + " \\"DepartmentId\\":4," + " \\"Name\\":\\"Sr. Sales Manager\\"" + " }" + " ]" + " }" + " ]" + "}").Result }; $scope.select = { Department: {}, Designation: {} }; $scope.onChange = function(selected) { var Designation = selected.Designation; console.log(Designation); $scope.designationData = Designation; }; }); </script> </body> </html>

Issues in getting a value of a key from an object using md-select AngularJs 1.X.X

Question

1 answers

solution1
0 2017-04-01 14:41:17

Issues in getting a value of a key from an object using md-select AngularJs 1.X.X

Question

1 answers

solution1 0 2017-04-01 14:41:17

solution1
0 2017-04-01 14:41:17