使用嵌套 JSON 的 md-select 中的问题 - AngularJs 1.X.X. - Issues in md-select using nested JSON

我有两个下拉"部门"和"指定"。最初我加载了部门，并根据部门选择，名称将自动填充。请查看 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>

第一个下拉菜单运行良好，但我无法填充第二个下拉菜单。请协助我。

您需要添加ng-change函数才能从第一个md-select获取更改，找到更新的代码。

工作中的杰斯菲德尔

<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>
  <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>
</div>

控制器

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;
  };
});

使用嵌套 JSON 的 md-select 中的问题 - AngularJs 1.X.X.

相关内容

最新更新

热门标签：