我有一个JSON Collection
$scope.person = [
{
"Id": 1
"Name": "John"
},
{
"Id": 2
"Name": "Jack"
},
{
"Id": 3
"Name": "Watson"
},
];
请参考我的帖子Copy JSON Object of One Select to another Select ng-model using AngularJS
我在这里使用 Angular Material md-select 代替HTML Select
在 md-select
中,ng-options无效。所以,请帮助我如何更新第一个md-select的选择值到第二个md-select
完整的HTML源代码
<!DOCTYPE html>
<html>
<head>
<title>HTML Select using AngularJS</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="md-block">
<md-input-container>
<label>Person</label>
<md-select ng-model="selected.person">
<md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option>
</md-select>
</md-input-container>
</div>
<hr />
<div class="md-block">
<md-input-container>
<label>Copy Person</label>
<md-select ng-model="selected.copy_person">
<md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option>
</md-select>
</md-input-container>
</div>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial'])
app.controller('myCtrl', function ($scope) {
$scope.person = [
{
"Id": 1,
"Name": "John"
},
{
"Id": 2,
"Name": "Jack"
},
{
"Id": 3,
"Name": "Watson"
}
];
$scope.selected = {
person: null,
copy_person:null
};
$scope.$watchCollection('selected.person', function (newData, oldDaata) {
var obj = JSON.parse(newData);
if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) {
var name = obj.Name;
alert(name);
$scope.selected.copy_person = obj;
}
});
});
</script>
</body>
</html>
&#13;
我有两个Angular Materials md-Select和相同的JSON Collection。我在第一个md-select&#34; Person&#34;中选择了一个人Watson,然后我需要在第二个md-select&#34; Copy Person&#34;中更新Same。但我无法更新。
我将JSON对象绑定为md-select选项中的值,而不是Id或Name
请帮助我如何更新md-select?
答案 0 :(得分:0)
不幸的是,md-select不支持ng-options ...
并且ng-repeat不能与选择组件的ng-model绑定。
答案 1 :(得分:0)
不是分配对象而只是分配原始值。
目前您正在使用此方法:
$scope.selected.copy_person = JSON.Parse(newData);
只需将逻辑更改为
$scope.selected.copy_person = newData;
完整版
<!DOCTYPE html>
<html>
<head>
<title>HTML Select using AngularJS</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="md-block">
<md-input-container>
<label>Person</label>
<md-select ng-model="selected.person">
<md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option>
</md-select>
</md-input-container>
</div>
<hr />
<div class="md-block">
<md-input-container>
<label>Copy Person</label>
<md-select ng-model="selected.copy_person">
<md-option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</md-option>
</md-select>
</md-input-container>
</div>
</div>
<script>
var app = angular.module('myApp', ['ngMaterial'])
app.controller('myCtrl', function ($scope) {
$scope.person = [
{
"Id": 1,
"Name": "John"
},
{
"Id": 2,
"Name": "Jack"
},
{
"Id": 3,
"Name": "Watson"
}
];
$scope.selected = {
person: null,
copy_person:null
};
$scope.$watchCollection('selected.person', function (newData, oldDaata) {
var obj = JSON.parse(newData);
if ((obj != undefined) && (obj != null) && (obj.Id != undefined) && (obj.Id != null) && (obj.Id != "0")) {
var name = obj.Name;
alert(name);
$scope.selected.copy_person = newData;
}
});
});
</script>
</body>
</html>
默认情况下,Value部分将JSON对象指定为字符串,具体取决于帖子Bind JSON Object as a Value in AngularJS HTML Select - Dropdown。因此,只需将值作为String而不是JSON Object进行比较。