I'm currently working on a test application. When i use the ng-repeater to populate the data, it is currently showing empty fields. However when i console.log the array, it is showing the correct data.
ORDER CONTROLLER
(function()
{
var injectParams = ['$stateParams'];
function orderController($stateParams) {
var vm = this;
var customerId = $stateParams.id;
customers = [
{
id: 1,
joined: '2000-12-02',
name: 'John',
city: 'Chandler',
orderTotal: 9.9956,
orders: [
{
id: 1,
product: 'Shoes',
total: 9.9956
}
]
},
{
id: 2,
joined: '1965-01-25',
name: 'Zed',
city: 'Las Vegas',
orderTotal: 19.99,
orders: [
{
id: 2,
product: 'Baseball',
total: 9.995
},
{
id: 3,
product: 'Bat',
total: 9.995
}
]
},
{
id: 3,
joined: '1944-06-15',
name: 'Tina',
city: 'New York',
orderTotal: 44.99,
orders: [
{
id: 4,
product: 'Headphones',
total: 44.99
}
]
},
{
id: 4,
joined: '1995-03-28',
name: 'Dave',
city: 'Seattle',
orderTotal: 101.50,
orders: [
{
id: 5,
product: 'Kindle',
total: 101.50
}
]
}
];
//load customers to view
vm.orders = [];
var result = customers;
function loadCustomers()
{
for (var i = 0; i < result.length; i++)
{
if (result[i].id == parseInt(customerId))
{
vm.orders.push(result[i].orders);
}
}
}
loadCustomers();
console.log(vm.orders);
};
orderController.$inject = injectParams;
angular.module('app')
.controller('orderController', orderController);
}());
ORDERS HTML
<div class="row">
<div class="small-12 columns">
<h1>ORDERS</h1>
<table>
<tr>
<th>ID</th>
<th>Product</th>
<th>Total</th>
</tr>
<tr ng-repeat="order in aT.orders">
<td>{{ order.id }}</td>
<td>{{ order.product }}</td>
<td>{{ order.total }}</td>
</tr>
</table>
</div><!--small-12 columns-->
</div><!--row-->
APP.JS
//Initialise Foundation
$(document).foundation();
//Initialise Module
(function ()
{
angular.module('app', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/customers');
$stateProvider
.state('customers',
{
url: '/customers',
templateUrl: 'app/views/customers.html',
controller: 'customerController',
controllerAs: 'aT',
})
.state('orders',
{
url: '/orders/:id',
templateUrl: 'app/views/orders.html',
controller: 'orderController',
controllerAs: 'aT',
});
});
}());
If orders is an array of arrays, you would need two repeaters. I'm not sure why you're pushing customer orders into orders as you seem to be searching by customer ID which appears to be unique among the items in customers. I would simply assign the value to orders, ie
var findCustomerOrders = function() {
for (var i = 0, l = customers.length; i < l; i++) {
if (customers[i].id == customerId) {
return customers[i].orders;
}
}
return [];
};
vm.orders = findCustomerOrders();
Your current template should be fine with this data.
You need to attach your array to scope
JS:
// declare a module
var app = angular.module('myApp', []);
// configure the module.
// in this example we will create a greeting filter
app.controller('CustomerController', ['$scope',
function($scope) {
$scope.customers = [
{
id: 1,
joined: '2000-12-02',
name: 'John',
city: 'Chandler',
orderTotal: 9.9956,
orders: [
{
id: 1,
product: 'Shoes',
total: 9.9956
}
]
},
{
id: 2,
joined: '1965-01-25',
name: 'Zed',
city: 'Las Vegas',
orderTotal: 19.99,
orders: [
{
id: 2,
product: 'Baseball',
total: 9.995
},
{
id: 3,
product: 'Bat',
total: 9.995
}
]
},
{
id: 3,
joined: '1944-06-15',
name: 'Tina',
city: 'New York',
orderTotal: 44.99,
orders: [
{
id: 4,
product: 'Headphones',
total: 44.99
}
]
},
{
id: 4,
joined: '1995-03-28',
name: 'Dave',
city: 'Seattle',
orderTotal: 101.50,
orders: [
{
id: 5,
product: 'Kindle',
total: 101.50
}
]
}
];
}
]);
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="CustomerController">
<div ng-repeat="customer in customers">
{{customer}}
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
Related
The problem is that I have a list of people and their city id. I want to get the city name based on their id from another list by a function.
<table class="table">
<tr>
<th>#</th>
<th>Name</th>
<th>Type</th>
<th>City</th>
</tr>
<tr ng-repeat="item in samples">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.type}}</td>
<td>{{getCity(item.city)}}</td>
</tr>
</table>
and the controller:
$scope.samples = [
{id: 1, name: "alex", type: "Average", city: 12},
{id: 2, name: "Alex", type: "Average", city: 12},
{id: 3, name: "Mia", type: "Medium", city: 13},
{id: 4, name: "Sasha", type: "Top", city: 14},
{id: 5, name: "Eric", type: "Top", city: 12},
{id: 6, name: "Taz", type: "Average", city: 14},
{id: 7, name: "Normai", type: "Low", city: 13},
{id: 8, name: "Jim", type: "Average", city: 11}];
$scope.city = [
{id: 11, name: "Dallas"},
{id: 12, name: "Los Angeles"},
{id: 13, name: "New York"},
{id: 14, name: "Washington"}
];
$scope.getCity = function(name) {
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
return $scope.city_name;
});
}
Here is a Fiddle for more details.
you are return value at wrong place. I just update the jsfiddle you can check here.
Here is the changes of the code.
$scope.getCity = function(name) {
$scope.city_name = "";
angular.forEach($scope.city, function(value, key){
if(value.id == name){
$scope.city_name = value.name;
}
});
return $scope.city_name;
}
}]);
Try this function
$scope.getCity = function(id) {
var city = $scope.city.filter(function(c){ return angular.equals(c.id, id); })[0];
return city.name;
}
I am new to use AngularJS and I am an absolute beginner. I tried using filters. I tried binding to the properties instead of directly binding the object. But the code shows {{x.people}} as the output instead of showing the list. What am I missing out here?
<!DOCTYPE html>
<html>
<head>
<title>ANGULAR APP</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
</head>
<body ng-app="myApp" ng-controller="myFirstController">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in model.people">
{{ x.name }}
</li>
</ul>
</body>
<script>
var app = angular.module('myApp', []);
var myFirstController = function($scope) {
$scope.model = {
people: [{
name: 'Jani',
country: 'Norway'
},
{
name: 'Carl',
country: 'Sweden'
},
{
name: 'Margareth',
country: 'England'
},
{
name: 'Hege',
country: 'Norway'
},
{
name: 'Joe',
country: 'Denmark'
},
{
name: 'Gustav',
country: 'Sweden'
},
{
name: 'Birgit',
country: 'Denmark'
},
{
name: 'Mary',
country: 'England'
},
{
name: 'Kai',
country: 'Norway'
}
];
};
}
app.controller('myFirstController', myFirstController);
</script>
</html>
there is an unnecessary ; at the end of your json data:
$scope.model = {
people:[
... // your data
{name:'Kai',country:'Norway'}]; // <------ here the ; is illegal
};
}
refer below fixed example:
var app = angular.module('myApp', []);
var myFirstController = function($scope) {
$scope.model = {
people: [{
name: 'Jani',
country: 'Norway'
},
{
name: 'Carl',
country: 'Sweden'
},
{
name: 'Margareth',
country: 'England'
},
{
name: 'Hege',
country: 'Norway'
},
{
name: 'Joe',
country: 'Denmark'
},
{
name: 'Gustav',
country: 'Sweden'
},
{
name: 'Birgit',
country: 'Denmark'
},
{
name: 'Mary',
country: 'England'
},
{
name: 'Kai',
country: 'Norway'
}
]
};
}
app.controller('myFirstController', myFirstController);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myFirstController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in model.people | filter: {name: test}">
{{ x.name }}
</li>
</ul>
</div>
I'm taking an udemy course on AngularJS- but rewriting all of the example projects using the 'controller as' syntax. This seems to be breaking when I use a local function. In the controller below, this.customers isn't available within the init() function. I've tested this with the strategic placement of console.logs. This seems to work fine if I'm using $scope.
Can anybody help me puzzle this out? The instructor introduced the 'Controller as' syntax but hasn't been using it throughout the course.
(function(){
var OrdersController = function($routeParams) {
var customerId = $routeParams.customerId;
this.orders = null; //not required
this.customers=[
{
id: 1,
joined: '2000-12-02',
name:'John',
city:'Chandler',
orderTotal: 9.9956,
orders: [
{
id: 1,
product: 'Shoes',
total: 9.9956
}
]
},
{
id: 2,
joined: '1965-01-25',
name:'Zed',
city:'Las Vegas',
orderTotal: 19.99,
orders: [
{
id: 2,
product: 'Baseball',
total: 9.995
},
{
id: 3,
product: 'Bat',
total: 9.995
}
]
},
{
id: 3,
joined: '1944-06-15',
name:'Tina',
city:'New York',
orderTotal:44.99,
orders: [
{
id: 4,
product: 'Headphones',
total: 44.99
}
]
},
{
id: 4,
joined: '1995-03-28',
name:'Dave',
city:'Seattle',
orderTotal:101.50,
orders: [
{
id: 5,
product: 'Kindle',
total: 101.50
}
]
}
];
//console.log(this.customers);
init = function () {
//Search the customers for the customerId - local function
console.log(this.customers);
for (var i=0,len=this.customers.length;i<len;i++) {
if (this.customers[i].id === parseInt(customerId)) {
this.orders = this.customers[i].orders;
break;
}
}
}
init();
};
//OrdersController.$inject = ['$routeParams'];
angular.module('customersApp')
.controller('OrdersController', OrdersController);
}());
First assign your this object to a variable:
var vm = this;
Then use the vm variable instead of this:
vm.orders = null; //not required
vm.customers=[
{
id: 1,
joined: '2000-12-02',
name:'John',
city:'Chandler',
orderTotal: 9.9956,
orders: [
{
id: 1,
product: 'Shoes',
total: 9.9956
}
]
},
{
id: 2,
joined: '1965-01-25',
name:'Zed',
city:'Las Vegas',
orderTotal: 19.99,
orders: [
{
id: 2,
product: 'Baseball',
total: 9.995
},
{
id: 3,
product: 'Bat',
total: 9.995
}
]
},
{
id: 3,
joined: '1944-06-15',
name:'Tina',
city:'New York',
orderTotal:44.99,
orders: [
{
id: 4,
product: 'Headphones',
total: 44.99
}
]
},
{
id: 4,
joined: '1995-03-28',
name:'Dave',
city:'Seattle',
orderTotal:101.50,
orders: [
{
id: 5,
product: 'Kindle',
total: 101.50
}
]
}
];
And finally in your function console log the array:
init = function () {
//Search the customers for the customerId - local function
console.log(vm.customers);
for (var i=0,len=vm.customers.length;i<len;i++) {
if (vm.customers[i].id === parseInt(customerId)) {
vm.orders = vm.customers[i].orders;
break;
}
}
}
**please anyone can help me i want to print list in Angularjs like this **
enter image description here
Use Order by
$scope.friends = [
{name: 'John', phone: '555-1212', age: 10},
{name: 'Mary', phone: '555-9876', age: 19},
{name: 'Mike', phone: '555-4321', age: 21},
{name: 'Adam', phone: '555-5678', age: 35},
{name: 'Julie', phone: '555-8765', age: 29}
];
<tr ng-repeat="friend in friends | orderBy:'name'">
read more here
You have to filter each group by the letters you want. Here's a Plunker Using this list:
$scope.myList = [{
id: 11,
name: 'Okra'
}, {
id: 12,
name: 'Musa'
}, {
id: 4,
name: 'Sky'
}, {
id: 13,
name: 'India'
}, {
id: 14,
name: 'Rose'
}, {
id: 15,
name: 'Titanic'
}, {
id: 16,
name: 'Onion'
}, {
id: 6,
name: 'Germany'
}, {
id: 17,
name: 'Beer'
}, {
id: 18,
name: 'Run'
}, {
id: 2,
name: 'Garden'
}, {
id: 19,
name: 'Mountain'
}]
One function to get the alphabets between the two:
function genCharArray(charA, charZ) {
var a = [], i = charA.charCodeAt(0), j = charZ.charCodeAt(0);
for (; i <= j; ++i) {
a.push(String.fromCharCode(i));
}
return a;
};
Then your filter:
app.filter("cfilter", function () {
return function (input, x, y) {
var groups = [];
var letters = genCharArray(x, y);
for (var i = 0; i < input.length; i++) {
for (var x = 0; x < letters.length; x++) {
if (input[i].name.substring(0, 1) == letters[x])
groups.push(input[i]);
}
} return groups;
}
});
And your HTML:
<div ng-repeat="w in myList | cfilter: 'A':'H' | orderBy: 'name'">
<div>{{w.name}}</div>
</div>
create one directive pass an array of letter and range of alphabates you want to disaply.
<dummy-directive data="arrayData" range="A-G"></dummy-directive>
<dummy-directive data="arrayData" range="H-L></dummy-directive>
<dummy-directive data="arrayData" range="M-P"></dummy-directive>
<dummy-directive data="arrayData" range="Q-Z"></dummy-directive>
Now question is that how to implement directive?
we will display sorted data.
In my controller I have this code:
$scope.lists = [{
listName: 'list1'
}, {
listName: 'list2'
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}];
});
The Input from lists cames from a webservice, so the values (list1 and list2) can be different each time i reload the app. I can also more then 2 items in lists.
How can I show the value from $scope[listName] in an ng-repat section in my view?
Thanks for your Help.
Stefan.
You might try something like this:
(function() {
angular.module("myApp", []).controller("controller", ["$scope",
function($scope) {
$scope.lists = [{
listName: "list1"
}, {
listName: "list2"
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}];
$scope.results = $scope[listName];
});
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp">
<div data-ng-controller="controller">
<ul>
<li data-ng-repeat="item in results">{{item.Name}}</li>
</ul>
</div>
</div>