0

「Department」と「Designation」の 2 つのドロップダウンがあります。最初に部門をロードし、部門の選択に基づいて、指定が自動入力されます。JSONオブジェクトを調べてください

{
   "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"
            }
         ]
      }
   ]
}

HTML の最終バージョンは

<!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>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Department:</p>
<md-select ng-model="Select.department" tabindex="9">
        <md-option ng-repeat="key in loadUpData.Department" value="{{key}}">{{key.Name}}</md-option>
    </md-select>
      <br/>
<p>Designation:</p>
<md-select ng-model="Select.department" tabindex="9">
        <md-option ng-repeat="key in Select.department.Designation" value="{{key}}">{{key.Name}}</md-option>
    </md-select>
</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.$watchCollection('Select.department', function (newData, oldDaata) {
    if ((newData != undefined) && (newData != null)) {
        console.log($scope.loadUpData.Department);
    }
});

    });
</script>
</body>
</html>

最初のドロップダウンは完全に機能しますが、2 番目のドロップダウンに入力できません。親切に私を助けてください。

4

1 に答える 1