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>
Related
I am trying to add new column dynamically in the table. I have below object which is returned in response from web service api. How can I display dynamic columns where myArray object is getting appended with many other fields (new columns)
$scope.myArray = [
{
"contacts": [
{
"id": "1",
"contact": {
"name": "Sam",
"Email": "ddd#co.com",
"PhoneNo": 2355
}
},
{
"id": "2",
"contact": {
"name": "John",
"Email": "test#co.com",
"PhoneNo": 2355
}
}
]
}
];
I have tried looking into the example provided in some of the answers in google. In my below JSFIDDLE, I am getting only the key name but not the values. How can I achieve both key and value using ng-repeat where the key names are dynamic.
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.myArray = [
{
"contacts": [
{
"id": "1",
"contact": {
"name": "Sam",
"Email": "ddd#co.com",
"PhoneNo": 2355
}
},
{
"id": "2",
"contact": {
"name": "John",
"Email": "test#co.com",
"PhoneNo": 2355
}
}
]
}
];
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min.js"></script>
<table ng-controller="myController" border="1">
<tr>
<th ng-repeat="(key, val) in myArray[0].contacts[0].contact">{{ key }}</th>
</tr>
<tr ng-repeat="row in myArray[0].contacts">
<td ng-repeat="(key, val) in row.contact">{{ val }}</td>
</tr>
</table>
I have 2 linked JSON object array .
Example :
Country :
[{
"countryCode":"IN",
"countryName":"India",
"currencyCode":"INR"
},
{
"countryCode":"US",
"countryName":"United States",
"currencyCode":"USD"
}]
Currency :
[{
"code":"INR",
"name":"Indian Rupee",
"locale":"kok_IN",
"display":1
}, {
"code":"USD",
"name":"US Dollar",
"locale":"en_US_POSIX",
"display":1
}]
The above two json obejcts are linked with a code .
I'm trying display the Currencyname from the currency object by linking the currencycode .
I am displaying like bellow :
<tr ng-repeat="country in countries | filter : query | orderBy : 'name'">
<td>{{ country.countryName }}</td>
<td>{{ }}</td> <!-- Currency name here -->
</tr>
How do I display the currency name here ?
Works for me with function getCurrencyByCountry:
angular.module("App", []).controller("AppController", function($scope) {
$scope.countries = [{
"countryCode": "IN",
"countryName": "India",
"currencyCode": "INR"
}, {
"countryCode": "US",
"countryName": "United States",
"currencyCode": "USD"
}];
$scope.currency = [{
"code": "INR",
"name": "Indian Rupee",
"locale": "kok_IN",
"display": 1
}, {
"code": "USD",
"name": "US Dollar",
"locale": "en_US_POSIX",
"display": 1
}];
$scope.getCurrencyByCountry = function(country){
var currency = "";
angular.forEach($scope.currency, function(value, key) {
if(country.currencyCode == value.code){
currency = value.name;
return false;
}
});
return currency;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="App" ng-controller="AppController">
<tr ng-repeat="country in countries |orderBy : 'name'">
<td>{{country.countryName}}</td>
<td>{{getCurrencyByCountry(country)}}</td>
<!-- Currency name here -->
</tr>
<table>
I would implement in a controller function
$scope.currencies = [{
"code": "INR",
"name": "Indian Rupee",
"locale": "kok_IN",
"display": 1
}, {
"code": "USD",
"name": "US Dollar",
"locale": "en_US_POSIX",
"display": 1
}];
$scope.getCurrency(code) {
return $scope.currencies.find(c => c.code === code).name;
}
(Let me know if you need this in ES5 instead)
Then you can use
{{getCurrency(country.code)}}
Im trying to create an app that will build the table columns and rows dynamically im stuck when I try to filter. It seems like the ng-model im trying to set is not getting set.
fiddle: http://jsfiddle.net/v6ruo7mj/49/
var myApp = angular.module('myApp',[]);
myApp.filter('test',function(){
return function(input,other){
console.log(other);
console.log(input);
return input;
}
});
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.rows = [
{
"branch": "default",
"comment": "",
"name": "20141228.150706",
"score": "0.45000",
"time": "0.02"
},
{
"branch": "default",
"comment": "",
"name": "20141226.022147",
"score": "0.56000",
"time": "6.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.022112",
"score": "0.56000",
"time": "3.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.021955",
"score": "0.55000",
"time": "3.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.021920",
"score": "0.49000",
"time": "10.00"
}];
$scope.cols = Object.keys($scope.rows[0]);
}]);
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<table border="1">
<tr>
<th ng-repeat="column in cols"><input ng-model="search[column]" placeholder="{{column}}" type="text"></th>
</tr>
<tr ng-repeat="row in rows |filter:search">
<td ng-repeat="column in cols ">{{row[column]}}</td>
</tr>
</table>
<pre>{{search | json}}</pre>
</div>
</div>
Looks like you're missing
$scope.search = {};
Try this: jsFiddle
Full code:
var myApp = angular.module('myApp',[]);
myApp.filter('test',function(){
return function(input,other){
console.log(other);
console.log(input);
return input;
}
});
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.search = {};
$scope.rows = [{
"branch": "default",
"comment": "",
"name": "20141228.150706",
"score": "0.45000",
"time": "0.02"
},
{
"branch": "default",
"comment": "",
"name": "20141226.022147",
"score": "0.56000",
"time": "6.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.022112",
"score": "0.56000",
"time": "3.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.021955",
"score": "0.55000",
"time": "3.00"
},
{
"branch": "default",
"comment": "",
"name": "20141226.021920",
"score": "0.49000",
"time": "10.00"
}];
$scope.cols = Object.keys($scope.rows[0]);
}]);
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<table border="1">
<tr>
<th ng-repeat="column in cols"><input ng-model="search[column]" placeholder="{{column}}" type="text"></th>
</tr>
<tr ng-repeat="row in rows |filter:search">
<td ng-repeat="column in cols ">{{row[column]}}</td>
</tr>
</table>
<pre>{{search | json}}</pre>
</div>
</div>
Dynamic search Demo
Angularjs using to dynamic filter logic
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
}
I have created an application in angularjs with ngTable, The application is working fine but sorting is not working. My json structured is nested, but values are coming correctly with the table
Can anyone please tell me some solution for this
My code is as given below
JSFiddle
html
<div ng-controller="IndexCtrl">
<table border="1" ng-table="mytable">
<tbody ng-repeat="peop in peoples">
<tr ng-repeat="people in peop">
<td sortable="'id'" data-title="'Id'">{{people.id}}</td>
<td sortable="'desig'" data-title="'Desig'">{{people.desig}}</td>
<td sortable="'name'" data-title="'Name'">{{people.name}}</td>
<td sortable="'place'" data-title="'Place'">{{people.place}}</td>
</tr>
</tbody>
</table>
</div>
script
var app = angular.module('app', ['ngTable']);
app.controller('IndexCtrl', function ($scope, $filter, ngTableParams) {
$scope.peoples = {
"ime123": [{"id": 145,
"desig": "doctor",
"name": "Manu",
"place": "ABCD"
}],
"ime148": [{"id": 148,
"desig": "engineer",
"name": "John",
"place": "POLK"
},
{
"id": 150,
"desig": "scientist",
"name": "Mary",
"place": "USE"
}]
};
$scope.mytable = new ngTableParams({
sorting: {
name: 'desc'
}
}, {
getData: function($defer, params) {
$scope.peoples = $filter('orderBy')( $scope.peoples, params.orderBy());
$defer.resolve( $scope.peoples);
}
});
});
The way you work with nested array in ngtable is not suitable ,in your case you can make array one dim again and allow directive to groupping
html
<table border="1" ng-table="mytable">
<tbody ng-repeat="peop in $groups">
<tr ng-repeat="people in peop.data">
<td sortable="id" data-title="'Id'">{{people.id}}</td>
<td sortable="desig" data-title="'Desig'">{{people.desig}}</td>
<td sortable="name" data-title="'Name'">{{people.name}}</td>
<td sortable="place" data-title="'Place'">{{people.place}}</td>
</tr>
</tbody>
</table>
contoller
$scope.mytable = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'desc'
}
}, {
total: peoples.length,
groupBy:'group',
getData: function ($defer, params) {
peoples = $filter('orderBy')(peoples, params.orderBy());
$defer.resolve(peoples);
}
});
data
var peoples = [{
"id": 145,
"desig": "doctor",
"name": "Manu",
"place": "ABCD",
"group": "ime123" //for grouping
}, {
"id": 148,
"desig": "engineer",
"name": "John",
"place": "POLK",
"group": "ime148" //for grouping
}, {
"id": 150,
"desig": "scientist",
"name": "Mary",
"place": "USE",
"group": "ime148" //for grouping
}];
here almost working jsfiddle.
default desc not working yet (ver 0.3.1)