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
}
Related
hi i am new to angularjs and i have been trying to do a table but for some reason it dose not work for me
and even the example from w3schoos dose not work for me but it works on their site
here is a link to their code : https://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_simple
and this is the error i get when i run it on vs on a page named index.html :index.html:10: function "x" not defined
and this is my code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="product in products">
<td>{{ product.title }}</td>
<td>{{ prodcut.Price }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/")
.then(function (response) {$scope.products = response.data.products;});
});
</script>
</body>
</html>
and the error : panic: template: index.html:10: function "product" not defined
i send to it a json file that looks like this :
{
"products": [
{
"id": 1,
"title": "שוקו",
"Price": "20",
"Quantity": 10
},
{
"id": 2,
"title": "חלב",
"Price": "30",
"Quantity": 20
},
{
"id": 3,
"title": "מילקי",
"Price": "40",
"Quantity": 30
},
{
"id": 4,
"title": "קפה",
"Price": "50",
"Quantity": 60
},
{
"id": 5,
"title": "שוקולד",
"Price": "40",
"Quantity": 50
},
{
"id": 6,
"title": "קולה",
"Price": "40",
"Quantity": 50
},
{
"id": 7,
"title": "טרופית",
"Price": "5",
"Quantity": 100
}
],
"title": "מוצרים"
}
replace
product.Price
with
products.Price
The issue is with your async api call. The products are undefined in the beginning and html template is trying to access it before its get updated by api call response.
Initialise the products array with empty array
Change your code here
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.products = []; // added this
$http.get("http://localhost:8080/")
.then(function (response) {$scope.products = response.data.products;});
});
</script>
here is the codepen link i create for you. Please note i am using a dummy api call for demo.
if you want to try with simple object then remove api call and assign the object you want. like this
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.products = [
{
"id": 1,
"title": "שוקו",
"Price": "20",
"Quantity": 10
},
{
"id": 2,
"title": "חלב",
"Price": "30",
"Quantity": 20
},
{
"id": 3,
"title": "מילקי",
"Price": "40",
"Quantity": 30
},
{
"id": 4,
"title": "קפה",
"Price": "50",
"Quantity": 60
},
{
"id": 5,
"title": "שוקולד",
"Price": "40",
"Quantity": 50
},
{
"id": 6,
"title": "קולה",
"Price": "40",
"Quantity": 50
},
{
"id": 7,
"title": "טרופית",
"Price": "5",
"Quantity": 100
}
]
});
</script>
also correct the typo
<table>
<tr ng-repeat="product in products">
<td>{{ product.title }}</td>
<td>{{ product.Price }}</td> // it was prodcut.
</tr>
</table>
The reason why the product is undefined is because you are not casting out the value or the data that you are getting back into an array or a JSON format for ng-repeat to read.
change the following:
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/")
.then(function (response) {$scope.products = response.data.products;});
});
</script>
To the following
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://localhost:8080/")
.then(function (response)
{
$scope.products = response.products;});
//log the input data in console to see if you actually are receiving data.
console.log(response);
});
</script>
And then you can call the defined values in your table like you did before:
<table>
<tr ng-repeat="product in products">
<td>{{ product.title }}</td>
<td>{{ prodcut.Price }}</td>
</tr>
</table>
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)
I was wondering what I am doing wrong with angular as the ngrepeat is not displaying the data.
I have a fiddle here
http://jsfiddle.net/e0e7dee5/
<div ng-controller="MyCtrl">
<div class="container-fluid">
<div ng-repeat="u in utilities.all">
{{u.name}}
</div>
</div>
</div>
Above should be right?
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
//var utilities = this;
var utilities = {};
utilities.all = [{ .... }]; // this is my data it is in the fiddle
console.log(utilities.all); // this displays array of objects
}
You should change var utilities = {}; to $scope.utilities = {};
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
//var utilities = this;
$scope.utilities = {};
$scope.utilities.all =
[{
"programId": 1062,
"name": "Atlantic City Electric",
"utilityTypeName": "Electric",
"programName": "Test Program 24",
"rate": 0.0775,
"term": 12,
"serviceReference": false,
"accountNumberTypeName": "Account Number",
"accountNumberLength": 10,
"msf": 4.95,
"etf": 100,
"unitOfMeasureName": "KwH",
"meterNumberLength": null,
"zip": "85281",
"$$hashKey": "object:325"
}, {
"programId": 1063,
"name": "Atlantic City Electric",
"utilityTypeName": "Electric",
"programName": "Test Program 12",
"rate": 0.0875,
"term": 24,
"serviceReference": false,
"accountNumberTypeName": "Account Number",
"accountNumberLength": 10,
"msf": 5.95,
"etf": 150,
"unitOfMeasureName": "KwH",
"meterNumberLength": null,
"zip": "85281",
"$$hashKey": "object:326"
}, {
"programId": 1064,
"name": "Atlantic City Electric",
"utilityTypeName": "Gas",
"programName": "Test Gas Program 12",
"rate": 0.555,
"term": 12,
"serviceReference": false,
"accountNumberTypeName": "Account Number",
"accountNumberLength": 10,
"msf": 1,
"etf": 10,
"unitOfMeasureName": "Therm",
"meterNumberLength": 5,
"zip": "85281",
"$$hashKey": "object:333"
}];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div class="container-fluid" ng-repeat="u in utilities.all">
<div>
{{u.name}}
</div>
</div>
</div>
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>
Here is the Json message:
{"title": {"default":"hello 3", "position":[2,12,0]},
"description":{"default":"description hello 3", "position":[1,12,0]},
"option": [{"default":"1","position":[3,12,0]}, {"default":"2", "position":[0,12,0]}]
},
I am new to angularjs, I am trying to load the json message in ascending order according to the position first element by angularjs and print them in html. ("0" means load firstly, so on so far. )
Could someone help me on that? Thanks in advance!
Take a look at this
Working demo
html
<div ng-controller="MyCtrl">
<ul ng-repeat="value in data">Default:{{value.title.default}}
<li ng-repeat="pos1 in value.title.position|orderBy:orderByValue">{{pos1}}</li>Default:{{value.description.default}}
<li ng-repeat="pos2 in value.description.position|orderBy:orderByValue">{{pos2}}</li>
<li ng-repeat="val in value.option">Default:{{value.option[$index].default}}
<div ng-repeat="pos3 in val.position|orderBy:orderByValue">{{pos3}}</div>
</li>
</ul>
</div>
script
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
$scope.orderByValue = function (value) {
return value;
};
$scope.data = [{
"title": {
"default": "hello 3",
"position": [2, 12, 0]
},
"description": {
"default": "description hello 3",
"position": [1, 12, 0]
},
"option": [{
"default": "1",
"position": [3, 12, 0]
}, {
"default": "2",
"position": [0, 12, 0]
}]
}];
});