Populate form from child object - javascript

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>

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>

Is this help?
plnkr
<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>

Related

Limit select option with another select with angularjs

My object from database is coming like this:
[
{
"id": 8,
"concessionaria": {
"id": 1,
"nome": "asda"
},
"plano": {
"id": 1,
"sigla": "B3",
"nome": "tetes"
},
"descricao": "45987",
"enable": true
},
{
"id": 7,
"concessionaria": {
"id": 2,
"nome": "teste2"
},
"plano": {
"id": 3,
"sigla": "b4",
"nome": "Teste 2"
},
"descricao": "qweqwe",
"enable": true
},
{
"id": 6,
"concessionaria": {
"id": 2,
"nome": "teste2",
"estado": "ES"
},
"plano": {
"id": 2,
"sigla": "B3",
"nome": "Consumidores"
},
"descricao": "werwerw",
"enable": true
}
]
And i need to show two select, to choose the "concessionaria" and then the "planos" it has.
How can i do it since the "concessionaria" comes multiple times as the "plano" changes?
You have to create new model.
This sample show to you how can convert or create new model to get the concessionaria and plano as array to make them as select option
var app = angular.module("app", []);
app.controller("ctrl", [
"$scope",
function($scope) {
var json = [{
"id": 8,
"concessionaria": {
"id": 1,
"nome": "asda"
},
"plano": {
"id": 1,
"sigla": "B3",
"nome": "tetes"
},
"descricao": "45987",
"enable": true
},
{
"id": 7,
"concessionaria": {
"id": 2,
"nome": "teste2"
},
"plano": {
"id": 3,
"sigla": "b4",
"nome": "Teste 2"
},
"descricao": "qweqwe",
"enable": true
},
{
"id": 6,
"concessionaria": {
"id": 2,
"nome": "teste2",
"estado": "ES"
},
"plano": {
"id": 2,
"sigla": "B3",
"nome": "Consumidores"
},
"descricao": "werwerw",
"enable": true
}
];
$scope.model = {
concessionaria: [],
plano: []
};
angular.forEach(json, function(item) {
var concessionaria = item.concessionaria;
var plano = item.plano;
$scope.model.concessionaria.push(concessionaria);
$scope.model.plano.push(plano);
});
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<label>concessionaria</label>
<select ng-model="form.concessionaria" ng-options="item as item.nome for item in model.concessionaria"></select> {{form.concessionaria}}
<hr />
<label>plano</label>
<select ng-model="form.plano" ng-options="item as item.nome for item in model.plano"></select> {{form.plano}}
</div>
You can use limitTo filter.
For example: ng-repeat="item in items | limitTo 2"
For more informations: https://www.w3schools.com/angular/ng_filter_limitto.asp
You will need two selects, populate the first select with distinct values of concessionaria, and once user select a value from the first select you will have the id of concessionaria, then depending on that value you can populate the second select box with different plano. So if user selects a concessionaria with id 2 your second select box will be populated with two plano (one with plano id 2 and other with plano id 3)

How to show json data as optgroup with multiple-select in Select Option in angularjs

I try to show JSON data as optgroup option with multi-select in angularjs but not get success
In Html it shown as:
<select ng-model="industrycatslect" ng-change="industryslected(industrycatslect)" multiple ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory track by skilldata.id">
<option value="">Select Location</option>
</select>
JSON shown as:
"skillCategory": [
{
"id": "8",
"group": "Technology",
"value": " Software Engineering"
},
{
"id": "17",
"group": "Technology",
"value": "Collaboration and Content Management"
},
{
"id": "22",
"group": "Functions",
"value": "Procurement"
},
{
"id": "23",
"group": "Functions",
"value": "Product"
}
],
Please Help me I think I done some mistake in "ng-options".
Not much changes except removing the track by part
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.skillCategory = [
{
"id": "8",
"group": "Technology",
"value": " Software Engineering"
},
{
"id": "17",
"group": "Technology",
"value": "Collaboration and Content Management"
},
{
"id": "22",
"group": "Functions",
"value": "Procurement"
},
{
"id": "23",
"group": "Functions",
"value": "Product"
}
]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<select ng-model="industrycatslect" multiple ng-options="skilldata.value as skilldata.value group by skilldata.group for skilldata in skillCategory">
<option value="">Select Location</option>
</select>
<br>
{{industrycatslect}}
</div>
I think that this might help you out. There was an error in how you define your skillCategory JSON data. I hope that this JSFiddle helps out. It's not sorted by ID but it displays the elements as intended:
Answer 1

Angular.js : ng-repeat OrderBy fails to order values

I am using Angular.JS to retrieve data from an object array passed from the server. Each object has an ID, a name and a position identifier that is used to order the objects in a table.
However, orderBy does not work: here is an example output by showing the positions.
Here is the code of list.js :
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
});
and the JADE page:
doctype html
html
head
title Angular.js Test Page
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
script(src='/javascripts/angular.min.js')
script(src='/javascripts/list.js')
body(ng-app='myApp', ng-controller='myCtrl' ng-init='list= #{JSON.stringify(list)}')
.col-lg-3
table.table.table-bordered
thead
tr
th User List
tfoot(ng-repeat="item in list | orderBy: 'position' track by item.position")
tr
td {{item.position}}
Here is the list that gets passed:
"list": [
{
"position": 5,
"name": "Item 1",
"id": 205690
},
{
"position": 9,
"name": "Item 2",
"id": 15540
},
{
"position": 12,
"name": "Item 3",
"id": 360640
},
{
"position": 27,
"name": "Item 4",
"id": 325470
},
{
"position": 7,
"name": "Item 5",
"id": 271670
},
{
"id": 72850,
"name": "Item 6",
"position": 9196
},
{
"id": 15080,
"name": "Item 7",
"position": 6863
},
{
"id": 242550,
"name": "Item 8",
"position": 6864
},
{
"id": 207490,
"name": "Item 9",
"position": 6865
},
{
"id": 15060,
"name": "Item 10",
"position": 6862
}
]
By all sources I checked, the ng-repeat syntax is correct.
Result is the same if I track by id, or remove track by; if I use OrderBy: '-position', position 9196 is put at the bottom (after '5').
Firefox console shows no warning or error at all!
Everything seems fine, so I am confused about what is going on. Can someone help?
Thanks.
Did you try to use tbody instead of tfoot ?
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr ng-repeat="item in list | orderBy:'position' track by item.position">
<td>{{item.position}}</td></tr>
</tbody>
</table>
</div>
I did it in the JSFiddle and it works ...
maybe the problem is with your angular version.
my code works perfect when its on angularjs 1.2.1 and doesn't work on angularjs 1.0.3. see it for your self on this fiddle
<div ng-app>
<div ng-controller="ClickToEditCtrl">
<ul>
<li ng-repeat="item in test track by item.id">
{{item.name}}
</li>
</ul>
</div>
</div>
$scope.list = [
{
"position": 5,
"name": "Item 1",
"id": 205690
},
{
"position": 9,
"name": "Item 2",
"id": 15540
},
{
"position": 12,
"name": "Item 3",
"id": 360640
},
{
"position": 27,
"name": "Item 4",
"id": 325470
}
];
http://jsfiddle.net/Miqe/wqgkst7d/1/

Json Data Handling using AngularJS

I have a new case, where I need help. I want to have 9 buttons and a panel that displays the movie details, depending on which one has been clicked. So say if I clicked 'Transformers', the transformers detail should appear in the panel. Then if I were to click 'Fury', the panel detail would change to the Fury details. I need this data to be in a JSON file. I've looked, how to do this and struggle to understand how I would go about doing this. Here's what I've got so far.
JS:
var app = angular.module("myApp", []);
app.controller('MainController', ['$scope', function ($scope) {
}])
JSON:
{
"movie": [
{
"id": 1,
"name": "Star Wars The Phantom Menace",
"format": "DVD",
"rate": 4,
"price": 2
},
{
"id": 2,
"name": "Star Wars A New Hope",
"format": "DVD",
"rate": 6,
"price": 4
},
{
"id": 3,
"name": "Transformers",
"format": "Blu-Ray",
"rate": 7,
"price": 3
},
{
"id": 4,
"name": "Transformers Dark of the Moon",
"format": "Blu-Ray",
"rate": 6,
"price": 5
}
]}
HTML:
<body ng-controller="MainController" ng-app="myApp">
<h1 style="text-align:center">Garrett's Rentals</h1>
<div ng-repeat="movie in movies">
<button>{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{movie.name}}</p>
<p>{{movie.format}}</p>
<p>{{movie.rate}}</p>
<p>{{movie.price}}</p>
</div>
</body>
use
var app = angular.module("myApp", []);
app.controller('MainController', ['$scope', function ($scope) {
var json={
"movie": [
{
"id": 1,
"name": "Star Wars The Phantom Menace",
"format": "DVD",
"rate": 4,
"price": 2
},
{
"id": 2,
"name": "Star Wars A New Hope",
"format": "DVD",
"rate": 6,
"price": 4
},
{
"id": 3,
"name": "Transformers",
"format": "Blu-Ray",
"rate": 7,
"price": 3
},
{
"id": 4,
"name": "Transformers Dark of the Moon",
"format": "Blu-Ray",
"rate": 6,
"price": 5
}
]};
console.log(json);
$scope.movies=json.movie;
console.log($scope.movie);
}]);
HTML
<body ng-controller="MainController" ng-app="myApp">
<h1 style="text-align:center">Garrett's Rentals</h1>
<div ng-repeat="movie in movies">
<button>{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{movie.name}}</p>
<p>{{movie.format}}</p>
<p>{{movie.rate}}</p>
<p>{{movie.price}}</p>
</div>
</body>
Fiddle for support:http://jsfiddle.net/sXkjc/993/
Use ng-click directive on button to set current selected movie like follwing.
var app = angular.module("myApp", []);
app.controller('MainController', ['$scope', function ($scope) {
$scope.movies= movies; //here movies is your json object
$scope.selectedMovie=$scope.movies[0]; // assume that first movie is selected default
}])
HTML
<div ng-repeat="movie in movies">
<button ng-click="selectedMovie=movie">{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{selectedMovie.name}}</p>
<p>{{selectedMovie.format}}</p>
<p>{{selectedMovie.rate}}</p>
<p>{{selectedMovie.price}}</p>
</div>
JS
angular.module('myApp', [])
.controller('MainController',['$scope','$http',function($scope,$http){
$scope.contents=null;
$http.get('URL TO JSON').then(function(resp){
console.log('Success', resp);
$scope.contents=resp.data;
},
function(err){
console.error('ERR',err);
})
}]);
HTML
<body ng-controller="MainController" ng-app="myApp">
<h1 style="text-align:center">Garrett's Rentals</h1>
<div ng-repeat="movie in movies">
<button>{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{movie.name}}</p>
<p>{{movie.format}}</p>
<p>{{movie.rate}}</p>
<p>{{movie.price}}</p>
</div>
Controller Code:
var app = angular.module("myApp", []);
app.controller('MainController', ['$scope', function ($scope) {
$scope.movies = {
movie: [
{
id: 1,
name: "Star Wars The Phantom Menace",
format: "DVD",
rate: 4,
price: 2
},
{
id: 2,
name: "Star Wars A New Hope",
format: "DVD",
rate: 6,
price: 4
},
{
id: 3,
name: "Transformers",
format: "Blu-Ray",
rate: 7,
price: 3
},
{
id: 4,
name: "Transformers Dark of the Moon",
format: "Blu-Ray",
rate: 6,
price: 5
}
]}
$scope.setMovie = function(movie) {
$scope.currentMovie = movie;
}
}])
HTML:
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainController" >
<h1 style="text-align:center">Garrett's Rentals</h1>
<div ng-repeat="movie in movies.movie">
<button ng-click = "setMovie(movie)">{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{currentMovie.name}}</p>
<p>{{currentMovie.format}}</p>
<p>{{currentMovie.rate}}</p>
<p>{{currentMovie.price}}</p>
</div>
</body>
</html>
http://plnkr.co/edit/0f5bbaS38GCIjGtCfLmy?p=preview
I have given a working example of your requirements see http://plnkr.co/edit/uQLqB3CfSUlETQEcpsS5?p=preview
Change the html to
<div ng-repeat="movie in movies">
<button ng-click="selectedMovie(movie)">{{movie.name}}</button>
</div>
<div class="panel">
<h3>You have selected:</h3>
<p>{{movie.name}}</p>
<p>{{movie.format}}</p>
<p>{{movie.rate}}</p>
<p>{{movie.price}}</p>
</div>
javascript to
myApp.controller('MainController', ['$scope', function($scope) {
var data = {
"movie": [
{
"id": 1,
"name": "Star Wars The Phantom Menace",
"format": "DVD",
"rate": 4,
"price": 2
},
{
"id": 2,
"name": "Star Wars A New Hope",
"format": "DVD",
"rate": 6,
"price": 4
},
{
"id": 3,
"name": "Transformers",
"format": "Blu-Ray",
"rate": 7,
"price": 3
},
{
"id": 4,
"name": "Transformers Dark of the Moon",
"format": "Blu-Ray",
"rate": 6,
"price": 5
}
]};
$scope.movies = data.movie;
$scope.selectedMovie = function(movie){
$scope.movie = movie;
}
}]);
All you need to do is define the movies object inside your controller in order for the movies to be displayed in your front-end. Embedding the movies JSON directly in your controller would look something like this:
app.controller('MainController', ['$scope', function ($scope) {
$scope.movies1 =
[{
"id": 1,
"name": "Star Wars The Phantom Menace",
"format": "DVD",
"rate": 4,
"price": 2
},
{
"id": 2,
"name": "Star Wars A New Hope",
"format": "DVD",
"rate": 6,
"price": 4
},
{
"id": 3,
"name": "Transformers",
"format": "Blu-Ray",
"rate": 7,
"price": 3
},
{
"id": 4,
"name": "Transformers Dark of the Moon",
"format": "Blu-Ray",
"rate": 6,
"price": 5
}];
}]);
Note that I have removed the movie property from inside the movies object and converted movies to an array instead, so that ng-repeat will work properly.
If instead you need to have the movies JSON as a separate file you can load that file using the $http service as #KuZon noted.
$http.get('movies.json').then(function(json) {
$scope.movies1 = json.data.movie;
});
In this case I have left the movie attribute inside the JSON object, and used it to select the array to store in $scope.movies1.
You can see both approaches in this Plunkr
Finally, don't forget to use ng-click on your buttons to actually select the movie. Something like the following:
<button ng-click="selectMovie1(movie)">{{movie.name}}</button>
and in your controller:
$scope.selectMovie1 = function(movie) {
$scope.movie1 = movie
}

combobox and angularjs using ng-options

My data structure is following
{
"Name": "Somename",
"SchoolSeasons": [
{
"Id": "1",
"Name": "2014/2015"
},
{
"Id": "2",
"Name": "2013/2014"
}
]
}
using angularjs inside html view I want to render this year inside combobox for selection. Tried following
<div ng-repeat="seasson in data.SchoolSeasons">
<select ng-model="seasson.Name"
ng-options="seasson.Name for seasson in session.Name">
</select>
</div>
any idea?
Given:
$scope.data = {
"Name": "Somename",
"SchoolSeasons": [{
"Id": "1",
"Name": "2014/2015"
}, {
"Id": "2",
"Name": "2013/2014"
}]
};
Should just be as simple as:
<select ng-model="seasson.Name" ng-options="seasson.Name for seasson in data.SchoolSeasons">
<option value="">-- choose season --</option>
</select>
Example here.

Categories