使用AngularJS将一个Select的JSON对象复制到另一个Select ng-model [英] Copy JSON Object of One Select to another Select ng-model using AngularJS
问题描述
我有一个JSON集合
$scope.person = [
{
"Id": 1
"Name": "John"
},
{
"Id": 2
"Name": "Jack"
},
{
"Id": 3
"Name": "Watson"
},
];
我有两个具有相同JSON集合的HTML Select.我在第一个选择"人"中选择了一个人 Watson ，然后我需要在第二个HTML选择"复制人"中更新该人. .但是我无法更新.
I'm having two HTML Select with same JSON Collection. I Selected a Person Watson in the First Select "Person", then I need to update the Same in the Second HTML Select "Copy Person". But I Can't able to update.
我将 JSON对象作为值绑定在HTML Select中，而不是 Id 或 Name
I bind the JSON Object as a Value in the HTML Select instead of Id or Name
<!DOCTYPE html>
<html>
<head>
<title>HTML Select using AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="md-block">
<label>Person</label>
<select ng-model="selected.person">
<option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option>
</select>
</div>
<hr />
<div class="md-block">
<label>Copy Person</label>
<select ng-model="selected.copy_person">
<option ng-repeat="key in person | orderBy:Id" value="{{key}}">({{key.Name}})</option>
</select>
</div>
</div>
<script>
var app = angular.module('myApp', []);
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>
在这里，我使用 $scope.$watchCollection 来更新复制人
Here I used $scope.$watchCollection to update the Copy Person
$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;
}
});
我的代码在第二次选择"中无法更新.请协助我更新...
My Code fails to update in the Second Select. Kindly assist me how to update...
推荐答案
这是您必须使用的代码，为此使用了ng-options:
This is the code you must use, ng-options is made for this:
<!DOCTYPE html>
<html>
<head>
<title>HTML Select using AngularJS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="md-block">
<label>Person</label>
<select ng-model="selected.person" ng-options="p as p.Name for p in person">
</select>
</div>
<hr />
<div class="md-block">
<label>Copy Person</label>
<select ng-model="selected.copy_person" ng-options="p as p.Name for p in person">
</select>
</div>
</div>
<script>
var app = angular.module('myApp', []);
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 = 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>
这篇关于使用AngularJS将一个Select的JSON对象复制到另一个Select ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
