Populate form from child object
Question
I tried searching for a solution on this but was not able to find the exact one.
Here is the scenario.
I have a list of objects ctrl.Parents and the parent object contains a list of childs just like we have a poco entity.
What I want is, to populate a select drop down from the child object. Here is a plunker which is not complete, and following is the code that would give you an idea.
// Code goes here var app = angular.module("testApp", []); app.controller("testCtrl", function($scope) { $scope.Parents = [{ "Id": 1, "Name": "First Note", "TypeName": "First Type", "Notes": [{ "Id": 1, "ParentID": 1, "Draft": "Draft 1", "Note": "First Draft" }, { "Id": 2, "ParentID": 1, "Draft": "Draft 2", "Note": "Second Draft" }] }, { "Id": 2, "Name": "Second Note", "TypeName": "Second Type", "Notes": [{ "Id": 3, "ParentID": 2, "Draft": "Draft 1", "Note": "First Draft" }, { "Id": 4, "ParentID": 2, "Draft": "Draft 4", "Note": "Second Draft" }] }] });
<!DOCTYPE html> <html ng-app="testApp"> <head> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-controller="testCtrl"> <select ng-model="parent.name" ng-options="p.Name for p in Parents"> </select> <br/> <b><span>Following list should be populated with Parent.Notes.Name as show in the <br/> EX: If Parent drop down has value First Note then following list will show</span></b> <br/> <select> <option selected="selected" value="Draft 1">Draft 1</option> <option value="Draft 2">Draft 2</option> </select> <br/> <span>And text will be as follows</span> <br/> <textarea>First Draft</textarea> </body> </html>
2 answers
solution1
1 ACCPTED 2014-11-25 08:19:19
I had a look at your plunker, It was almost right. You were trying to bind to properties that did not exists on the Notes model. Try this:
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
<select ng-model="parent" ng-options="p.Name for p in Parents">
</select>
<select ng-options="n.Note for n in parent.Notes" ng-model="Notes">
</select>
</body>
</html>
If you want to select a default value add that to your model:
...//the end of your model
}, {
"Id": 4,
"ParentID": 2,
"Note": "Second Draft"
}]
}]
$scope.parent = $scope.Parents[0];
});
In order to select a default child based on a value of a property you will have to update your code accordingly:
change your script.js to:
// Code goes here
var app = angular.module("testApp", []);
app.controller("testCtrl", function($scope) {
$scope.Parents = [{
"Id": 1,
"Name": "First Note",
"TypeName": "First Type",
"Notes": [{
"Id": 1,
"ParentID": 1,
"Note": "First Draft",
"Def" : true
}, {
"Id": 2,
"ParentID": 1,
"Note": "Second Draft",
"Def" : false
}]
}, {
"Id": 2,
"Name": "Second Note",
"TypeName": "Second Type",
"Notes" : [{
"Id": 3,
"ParentID": 2,
"Note": "First Draft",
"Def" : false
}, {
"Id": 4,
"ParentID": 2,
"Note": "Second Draft",
"Def" : true
}]
}];
$scope.update = function() {
$scope.Notes = $scope.findNote($scope.parent.Notes);
}
$scope.findNote = function (notes) {
for (var i = 0; i < notes.length; i++) {
if (notes[i].Def == true) {
return notes[i];
}
}
}
});
and update your html:
<body ng-controller="testCtrl">
<select ng-model="parent" ng-options="p.Name for p in Parents" ng-change="update()">
</select>
<select ng-options="n.Note for n in parent.Notes" ng-model="Notes" >
</select>
</body>
solution2
1 2014-11-25 08:26:05
Is this help?
<body ng-controller="testCtrl">
<select ng-model="p" ng-options="p.Name for p in Parents">
</select>
<select ng-model="note.SelectedID" ng-options="note.Id for note in p.Notes">
</select>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.