If I have, for example, the array:
$scope.users = [
John: {
age: 18,
genre: 'male',
type: 'admin'
},
Paul: {
age: 22,
genre: 'male',
type: 'admin'
}
];
How can I get the users names when I iterate with ngRepeat?
<li ng-repeat="user in users">
{{ }} <!-- Name Here -->
{{ user.age }} <br>
{{ user.genre }} <br>
{{ user.type }}
</li>
Thanks!
1) You have error in your code: your array should be an object, since it has keys John, Paul ...
2) In ngRepeat you can iterate over object properties like (key, value) in obj
Here is working example:
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope ) {
var ctrl = this;
ctrl.users = {
John: {
age: 18,
genre: 'male',
type: 'admin'
},
Paul: {
age: 22,
genre: 'male',
type: 'admin'
}
};
}]);
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl as $ctrl">
<ul>
<li ng-repeat="(key, user) in $ctrl.users track by $index">
{{ key }}
{{ user.age }} <br>
{{ user.genre }} <br>
{{ user.type }}
</li>
</ul>
</div>
</div>
First of all arrays can't have custom keys. So I suppose you are using object $scope.users.
And for answer, you can do this: ng-repeat="(name, user) in users"
https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties
You can use Object.keys(users) to get an array with the values ['Paul','John']
<li ng-repeat="user in users track by $index">
{{ Object.keys(users)[$index] }}
{{ user.age }} <br>
{{ user.genre }} <br>
{{ user.type }}
</li>
this isn't tested but I think it should be along the lines of what you need.
Related
What is the mistake in my code? cust.name and cust.city are not displaying.
Why are no list items created?
<html>
<body>
<div data-ng-controller="SimpleController">
Name :
<br />
<input type="text" data-ng-model="name" placeholder="Enter Your Name " /> {{ name }}
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city' ">
{{ cust.name | uppercase }} - {{ cust.city | lowercase }}
</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [
{
name: 'Rishabh Shrivas',
city: 'New Delhi'
},
{
name: 'Rishabh Bharadawaj',
city: 'Noida'
},
{
name: 'Rishabh Sen',
city: 'Gurgaon'
}
];
}
</script>
</body>
</html>
You need an ng-app section in the HTML, even an empty one is sufficient. Also, you need to create the controller differently:
var myApp = angular.module('myApp',[]);
myApp.controller('SimpleController', ['$scope', function($scope) {
$scope.customers = [
{
name: 'Rishabh Shrivas',
city: 'New Delhi'
},
{
name: 'Rishabh Bharadawaj',
city: 'Noida'
},
{
name: 'Rishabh Sen',
city: 'Gurgaon'
}
];
}]);
Output should be
Name : AAA, Type: Flower
Name : BBB, Type: Bird
Controller
function myCtrl($scope) {
$scope.items = [
{id: 0, name: 'AAA', type: 12},
{id: 1, name: 'BBB', type: 33}];
$scope.types = [
{id: 0, name: 'Dog'},
{id: 12, name: 'Flower'},
{id: 24, name: 'Fish'},
{id: 33, name: 'Bird'}];
}
HTML
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ ??? }}
</div>
</div>
</div>
How can I retrieve a matching element in $scope.types by 'item.type'?
Your controller should be:
angular.module('myApp', []).controller('myCtrl', myCtrl);
function myCtrl($scope) {
$scope.items = [
{id: 0, name: 'AAA', type: 12},
{id: 1, name: 'BBB', type: 33}];
$scope.types = [
{id: 0, name: 'Dog'},
{id: 12, name: 'Flower'},
{id: 24, name: 'Fish'},
{id: 33, name: 'Bird'}];
$scope.getType = function(id){
return $scope.types.filter(function(item){
return (item.id === id);
})[0].name;
}
}
And template:
<div ng-app='myApp'>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ getType(item.type) }}
</div>
</div>
</div>
I worked here: http://jsfiddle.net/f9019o5k/2/
Write and function in your controller which will return the required type. Doing entire thing in HTML might make it unreadable and complex
$scope.getType(id){
return $scope.items.filter(function(item){
item.id === id;
});
}
And call it in your HTML as
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ getType(item.id) }}
</div>
</div>
</div>
Its too simple if we Use angular filters to achieve this.
app.filter('myFilter ', function() {
return function(input,obj) {
angular.forEach(obj,function(val){
if(val.id == input)
{
return val.name;
}
})
};
});
Html
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ item.type | myFilter:types }}
</div>
</div>
</div>
I've got an object in a service I'm trying to represent in the page markup. Notably a description key in the object that stores the local address of an HTML file with the relevant description.
Here is the object I'm referencing:
service.content = [
{
id: 'bootstrap-grid',
title: 'The Complete Basics of the Bootstrap 3 Grid',
type: 'article',
date: 'February 28, 2015',
description: 'articles/partial/BootstrapGrid/description.html',
pathToHTML: 'articles/partial/BootstrapGrid/BootstrapGrid.html',
ratingArr: [],
updated: null,
},
{
id: 'HTMLConverter',
title: 'Blog-friendly HTML Converter',
type: 'resource',
date: 'March 6, 2015',
description: 'components/HTMLconverter/description.html',
pathToHTML: 'components/HTMLconverter/friendlyHTML.html',
ratingArr: [],
updated: null,
}
];
Here is the markup I'm trying to work with. See the comment to pinpoint problem.
<div class="global-container" ng-controller="HomeCtrl">
<h1>New Content</h1>
<span ng-repeat="post in posts">
<h1>
{{ post.title }}
</h1>
<div>
{{ post.date }}
</div>
<div class="post-title">
<a ui-sref="post({ id: post.id })">
{{ post.title }}
</a>
</div>
<!-- How can I get this to display the contents of the local html file address at this location? -->
{{ post.description }}
<a ui-sref="post({ id: post.id })">
Read Article
</a>
</span>
</div>
I tried ng-include but to no avail.
<ng-include src={{ post.description }}></ng-include>
I also tried creating a directive, but template URL doesn't include the current the lexical scope. What are my options here?
Try
<ng-include src="post.description"></ng-include>
I tried the following code:
var app = angular.module('app', ['ngRoute', 'dx'])
app.controller('IndexCtrl', function($scope){
var contacts = [
{ name: "Barbara J. Coggins", phone: "512-964-2757", email: "BarbaraJCoggins#rhyta.com", category: "Family" },
{ name: "Carol M. Das", phone: "360-684-1334", email: "CarolMDas#jourrapide.com", category: "Friends" },
{ name: "Janet R. Skinner", phone: "520-573-7903", email: "JanetRSkinner#jourrapide.com", category: "Work" }
];
$scope.slideOutOptions = {
dataSource: contacts,
itemTemplate: 'item',
menuItemTemlate: 'menuItem'
}
})
<!-- HTML -->
<div class="app-index" ng-controller="IndexCtrl">
<div dx-slideout="slideOutOptions">
<div data-options="dxTemplate: { name: 'item' }">
<h1 data-bind="text: category"></h1>
<p><b>Name:</b> <span data-bind="text: name"></span></p>
<p><b>Phone:</b> <span data-bind="text: phone"></span></p>
<p><b>e-mail:</b> <span data-bind="text: email"></span></p>
</div>
<div data-options="dxTemplate: { name: 'menuItem' }">
<b data-bind="text: name"></b>
</div>
</div>
</div>
AngularJS there is not enough documentation on the DevExpress site. there are only examples using Knockout. Checkout PhoneJS DXSlideOut Documentation
The problem is in the HTML templates. You should use Angular syntax there.
<div dx-slideout="slideOutOptions">
<div data-options="dxTemplate: { name: 'item' }">
<h1>{{category}}</h1>
<p><b>Name:</b> <span>{{name}}</span></p>
<p><b>Phone:</b> <span>{{phone}}</span></p>
<p><b>e-mail:</b> <span>{{email}}</span></p>
</div>
<div data-options="dxTemplate: { name: 'menuItem' }">
<b>{{name}}</b>
</div>
</div>
Checkout docs about Angular approach.
I have an array of restaurant objects and I want to list them by grouping their cities
My object is like;
restaurant = {
id: 'id',
name: 'name',
city: 'city'
}
This HTML Markup can give some info about what I want to do.
<div ng-repeat="restaurant in restaurant | filter: ???">
<div class="header">
<h1 ng-bind="restaurant.city"></h1>
<a>Select All</a>
</div>
<div class="clearfix" ng-repeat="???">
<input type="checkbox" id="restaurant.id" />
<label ng-bind="restaurant.name"></label>
</div>
</div>
Can I do it with one single array or do i need to create seperate city and restaurant arrays to do it?
If you want to group restaurants by city, you can use groupBy of angular.filter module.
Just add the JS file from here: http://www.cdnjs.com/libraries/angular-filter to your project and use following code.
var myApp = angular.module('myApp',['angular.filter']);
function MyCtrl($scope) {
$scope.restaurants = [
{id: 1, name: 'RestA', city: 'CityA'},
{id: 2, name: 'RestB', city: 'CityA'},
{id: 3, name: 'RestC', city: 'CityC'},
{id: 4, name: 'RestD', city: 'CityD'}
];
}
<div ng-controller="MyCtrl">
<ul ng-repeat="(key, value) in restaurants | groupBy: 'city'">
<b>{{ key }}</b>
<li ng-repeat="restaurant in value">
<i>restaurant: {{ restaurant.name }} </i>
</li>
</ul>
</div>
I've created JSFiddle for you with working example.