我在使用AngularJs应用程序（版本1.X.X）中使用md-select选择的Object中获取Value Key时遇到问题。
我有两个下拉列表“Department”和“Designation”。最初我加载了部门并根据部门选择，指定将自动填充。请查看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"
}
]
}
]
}
请查看代码
<!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>
我正在尝试显示所选项目的DepartmentId和DesignationId，但我无法获取ID。请帮助我。
答案 0 :(得分：0)
需要修复的两件事：
您在控制器中定义$scope.Select = ...，但尝试在视图中使用ng-model="select.Department"引用它。 JavaScript / Angular区分大小写，因此Select !== select - 确保引用具有相同大小写的变量。
如果要将对象值绑定到控件，请在<md-option>元素上使用ng-value="key"而不是value="{{key}}"。修复此问题后，您无需在onChange处理程序中JSON.parse(...)。
这两个更改是更新的代码：
<!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>