I'm using Angular 2 in my project,and I have this json object:
[
{
"city": "toto"
},
{
"city": "titi"
},
{
"city": "tata"
},
...
]
What I want is, to populate this object in the UI like this:
toto -> titi (with a button here)
titi -> tata (with a button here)
I tried this but it doesn't work:
<div formArrayName="prices">
<div *ngFor="let myGroup of myForm.controls.prices.controls; let i=index">
<div [formGroupName]="i">
<span *ngIf="myForm.controls.prices.controls.length > 1" >
</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control" >
</div>
</div>
Any suggestions please?
Something like this?
<div *ngFor="let item of items; let i=index">
<span>{{item.city}}</span> --> <span *ngIf="items[i+1]">{{items[i+1].city}}</span>
</div>
outputs:
toto --> titi
titi --> tata
tata -->
If you want to not show the last item use let last = last and filter out the last item.
<div *ngFor="let item of items; let i=index; let last = last">
<div *ngIf="!last">
<span>{{item.city}}</span> --> <span *ngIf="items[i+1]">{{items[i+1].city}}</span>
</div>
</div>
Related
I'd like to add row on each 2 elements of ngFor loop.But I couldnt handle it.
I have studentNames array like below
studentNames=[
{
name:"Jonas",
age:22,
number:"1234"
},
{
name:"Mathilda",
age:25,
number:"5432"
},
{
name:"Jacob",
age:20,
number:"4321"
},
{
name:"Ivan",
age:23,
number:"6984"
},
{
name:"Kate",
age:21,
number:"3432"
},
{
name:"James",
age:20,
number:"4312"
},
{
name:"Sean",
age:23,
number:"4321"
},
{
name:"Julia",
age:23,
number:"4321"
},
]
Here what I tried
<ng-container *ngFor="let item of studentNames;let i=index">
<div class="row" *ngIf="i%2==0">
<div class="col md-12">
{{item.name}}
</div>
</div>
</ng-container>
This only skipped when index is not even.
Here how I want to see them below(order doesnt matter only should be 2 by 2 per row).
Stackblitz example: https://stackblitz.com/edit/bootstrap-wpfukz?file=app%2Fapp.component.html
This is a bit more "hacky" approach but it's HTML-only:
<ng-container *ngFor="let item of studentNames;let i=index">
<div *ngIf="i%2==0">
<div class="row">
<div class="col md-12">
{{studentNames[i].name}}
</div>
<div class="col md-12">
{{studentNames[i + 1].name}}
</div>
</div>
</div>
</ng-container>
You can try like below. Use *ngFor exported value index and use half length of the array to continue the loop
<ng-container *ngFor="let item of studentNames; let j = index;">
<ng-container *ngIf="j < (studentNames.length / 2)">
<div class="row">
<div class="col md-6">
{{item.name}}
</div>
<div class="col md-6">
{{ studentNames[ j + (studentNames.length / 2) ].name }}
</div>
</div>
</ng-container>
</ng-container>
Working stackblitz
Note : Array length should be an even number ;)
I developed a gallery of images separated by several categories.
I just want to display categories that contain images.
I have three categories: "new", "old", "try".
Of these three categories, only new and old have images. My problem is that all categories are appearing, even those that have no image (as is the case with try).
Is there a way to present only the categories that contain images?
How can I do this?
DEMO
code
<div *ngFor="let cat of Cats">
<div class="row ">
<span class="">{{cat}}</span>
</div>
<ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let product of data; let j = index;">
<li class="mdc-image-list__item" *ngIf="product.Cat == cat">
<div class="mdc-image-list__image-aspect-container">
<ng-container *ngIf="product.image == null; else productImage">
<img src="./assets/image-not-found.svg" class="mdc-image-list__image imagenotfound">
</ng-container>
<ng-template #productImage>
<img [src]="product.image" class="mdc-image-list__image">
</ng-template>
</div>
</li>
</ng-container>
</ul>
</div>
The try should not be presented :(
You can wrap your category div in an <ng-container>, and then use *ngIf to check if your data array contains a product in a given category. The best way to achieve that is to have an array with product counts per given category.
Add this to your AppComponent class:
get counts() {
return this.data.reduce((obj, value) => {
if (value.Cat in obj) {
obj[value.Cat]++;
} else {
obj[value.Cat] = 1;
}
return obj;
}, {});
}
And then use this as your template:
<ng-container *ngFor="let cat of Cats">
<div *ngIf="counts[cat]">
<div class="row ">
<span class="">{{cat}}</span>
</div>
<ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let product of data; let j = index;">
<li class="mdc-image-list__item" *ngIf="product.Cat == cat">
<div class="mdc-image-list__image-aspect-container">
<ng-container *ngIf="product.image == null; else productImage">
<img src="./assets/image-not-found.svg" class="mdc-image-list__image imagenotfound">
</ng-container>
<ng-template #productImage>
<img [src]="product.image" class="mdc-image-list__image">
</ng-template>
</div>
</li>
</ng-container>
</ul>
</div>
</ng-container>
You can write format function, write data as an object where the key is category, value is array of images and use keyvalue pipe.
For example:
component property: formattedData: {[key: string]: string[]} = {}
format function:
formatData(data: {image: string; cat: string}[]): void {
data.forEach((item: {image: string; cat: string}) => {
if (this.formattedData[item.cat]) {
this.formattedData[item.cat].push(item.image)
} else {
this.formattedData[item.cat] = [item.image]
}
});
}
call the format function in constructor:
constructor() {
this.formatData(this.data);
}
template:
<div *ngFor="let item of formattedData | keyvalue">
<div class="row">
<span class="">{{item.key}}</span>
</div>
<ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
<ng-container *ngFor="let image of item.value;">
<li class="mdc-image-list__item">
<div class="mdc-image-list__image-aspect-container">
<img [src]="image ? image : './assets/image-not-found.svg'" class="mdc-image-list__image" [ngClass]="{'imagenotfound': !image}">
</div>
</li>
</ng-container>
</ul>
</div>
I think it looks better because we have a little less logic in the template. You have only listed categories that have images.
I am looking to display an overview of each widget category to appear above the filtered results when that widget category is selected.
I am assuming this will require a ng-show directive so will perhaps require some controller code too. But any pointers on linking up select dropdown with my ng-repeat and linking up with ng-show would be great.
Here is what I am aiming for:
Before
After
<ion-view title="Select Box Filter" id="page6" class=" ">
<ion-content padding="true" class="has-header">
<ion-list id="tListSelectFilter-list11" class=" ">
<label class="item item-select " id="tListSelectFilter-select1">
<span class="input-label">Select</span>
<select></select>
</label>
<ion-item id="tListSelectFilter-list-item25" class=" ">Widget Range 1</ion-item>
<ion-item id="tListSelectFilter-list-item26" class=" ">Widget Range 2</ion-item>
<ion-item id="tListSelectFilter-list-item27" class=" ">Widget Range 3</ion-item>
</ion-list>
<ion-item ng-repeat="product in products | filter:select" class="item-thumbnail-left item-text-wrap"
href="#/tab/list/{{product.item}}">
<h2>Product Name: {{product.name}}</h2>
<h3>Quantity: {{product.quantity}}</h3>
<h2>Price: £{{product.price}}</h2>
</ion-item>
</ion-content>
</ion-view>
<!--Widget Range 1 Overview Text - Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected.
Widget Range 2 Overview Text - Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected.
Widget Range 3 Overview Text - Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected.-->
https://plnkr.co/edit/0WrinKY2X7Ijq32hBzms
Here would be your ng-repeat
<span>{{description}}</span>
<ion-item ng-repeat="product in products | filter:select"
class="item-thumbnail-left item-text-wrap" ng-click="showDescription(product)" >
<h2>Product Name: {{product.name}}</h2>
<h3>Quantity: {{product.quantity}}</h3>
<h2>Price: £{{product.price}}</h2>
</ion-item>
This would be inside the controller
// description initialized to nothing
$scope.description = '';
$scope.showDescription = function(product) {
$scope.description = product.description;
}
Now this assumes that the description for each product is apart of the product object - just as the name, quantity, and price.
I would create json object array for categories as
$scope.categories = [
{"name":"Category 1", "description": "This is description of category1"}
{"name":"Category 2", "description": "This is description of category2"}
{"name":"Category 3", "description": "This is description of category1"}
]
I will bing this array to create the category list.
<ion-list id="tListSelectFilter-list11" class=" ">
<label class="item item-select " id="tListSelectFilter-select1">
<span class="input-label">Select</span>
<select></select>
</label>
<ion-item id="tListSelectFilter-list-item25" class=" " ng-repeat="c in categories" ng-model="selected.category">
{{c.name}}
</ion-item>
</ion-list>
<span>{{selected.category.description || ""}}</span>
This is how you can do it.
Keep your data as json obj array in controller. This will contain : Select item names and related descriptions.
Keep a place holder in controller for the currently selected option, you can use this too display the information on your page within the controller scope.
P.S : I have done it in simple HTML to show how this can be achieved. In case of any doubts do comment.
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function() {
this.selected = "";
this.data = [{
"name": "Widget 1",
"desc": "Here is an example of the overview text for Widget Range 1 to be produced when this specific dropdown is selected."
}, {
"name": "Widget 2",
"desc": "Here is an example of the overview text for Widget Range 2 to be produced when this specific dropdown is selected."
}, {
"name": "Widget 3",
"desc": "Here is an example of the overview text for Widget Range 3 to be produced when this specific dropdown is selected."
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl as ctrl">
<select ng-model="ctrl.selected" ng-options="widget.name for widget in ctrl.data">
<option value="">Please select</option>
</select>
<div>{{ctrl.selected.desc}}</div>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
</div>
I have something like an input to add items into either column 1 or column 2 and each time adding the items, the column will show up what is added right away with an 'X' beside it so if you want to delete the item just click on 'X'. At first I wasn't thinking much so I used an easy way to remove the HTML but then I realized, that's just removing the HTML (There's also a search input if I type something into search and clear the search, all items will show again). This is when I realized just removing the HTML is a mistake that I need to remove the object too but how can I make it so it'll delete the right object in the array?
My angular script
angular.module("addItemApp", [])
.controller("toDoCtrl", function ($scope) {
$scope.items = [];
$scope.addItem = function (item) {
console.log(item);
$scope.items.push(angular.copy(item));
console.log($scope.items);
};
$scope.remove = function (item) {
var index = $scope.items.indexOf(item);
$scope.items.splice(index, 1);
}
});
my html
<div class="row">
<div class="col-xs-6 col-sm-4 left-column">
<div class="input-item">
<input type="text" placeholder="Enter Item" ng-model="item.name" class="enter-item">
<select class="column-select" ng-model="item.pos">
<option value="default" selected>Choose Column</option>
<option value="column1">Column 1</option>
<option value="column2">Column 2</option>
</select>
<button class="add-button" type="button" ng-click="addItem(item)">Add Item</button>
</div>
<div class="search-item">
<label for="search">Search An Item</label>
<div class="search-input">
<input ng-model="query" type="text" placeholder="Search" id="search"><span class="fa fa-search icon-search"></span>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<h3 class="column-header column1">
Column 1
</h3>
<ul ng-repeat="item in items | filter:{ pos: 'column1' } | filter:query">
<li>{{item.name}}
<button remove-on-click ng-click="remove()" class="remove-button fa fa-times"></button>
</li>
</ul>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">
<h3 class="column-header column2">
Column 2
</h3>
<ul ng-repeat="item in items | filter:{ pos: 'column2' } | filter:query">
<li>{{item.name}}
<button remove-on-click ng-click="remove()" class="remove-button fa fa-times"></button>
</li>
</ul>
</div>
</div>
Thanks in advance everyone.
you can do it in two ways -
1
$scope.remove = function(item) {
var index = $scope.items.indexOf(item);
$scope.items.splice(index, 1);
}
<button ng-click="remove(item)"></button>
2
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
<button ng-click="remove($index)"></button>
Please note that, when filter is applied, the $index may not be the one you should use to remove, better go with first approach. I have given example of $index for your reference.
<button ng-click="remove(item)"></button>
should work, since item is defined earlier in the ng-repeat and you already have a remove function defined on your $scope.
I have a multidimensional array from an API. Is it possible to programatically loop through the array?
{
success: true,
categories: [{
cat_id: "2",
name: "This is category One",
description: null,
photo_url: "/img/test.png",
order: "1",
items: [{
item_id: "1",
title: "Desk",
item_url: "/690928460",
photo_url: "/desk.png",
}, {
item_id: "2",
title: "Chair",
item_url: "/18882823",
photo_url: "/chair.png",
},
}]
}]
}
My controller looks like this:
myApp.controller('items', function($scope, $http, $location, Data) {
var apiUrl = '/api/items';
$http.get(apiUrl).
success(function(data) {
$scope.data = Data;
$scope.allData = data;
});
$scope.changeView = function(view) {
$location.path(view);
}
});
Angular index file just has: <div ng-view=""></div>
View file
<div class="scrollable categories-container animated-fast slideInUp">
<div class="container categories">
<div class="row" ng-repeat="categories in allData">
<div class="col-xs-6" ng-repeat="category in categories">
<div class="items">
<div class="title">
{{ category.name }}
</div>
</div>
</div>
</div>
</div>
</div>
I can loop through the category names fine, but when trying to return items for EACH category I don't understand the logic behind it...
I would suggest some simple nested for loops, as for each gives rise to more complexity.
As I'm not sure what you want to do with the data let's just create an array of all item names and one of all category names:
Within your success function:
var items = [], categories = []
for(var i = 0; i < data.categories.length;i++){
categories.push(data.categories[i].name);
for(var j = 0; j < data.categories[i].items.length;j++){
items.push(data.categories[i].items[j].name);
}
}
console.log(categories);
console.log(items);
EDIT:
Completely missed your html code somehow, here is my solution:
<div class="scrollable categories-container animated-fast slideInUp">
<div class="container categories">
<div class="col-xs-6" ng-repeat="category in allData.categories">
<div class="items">
<div class="title">
{{ category.name }}
</div>
</div>
</div>
</div>
</div>
EDIT 2:
As to your comment:
If you want to select the secondary view's contents(ie the items) based on the selection of a category I would suggest a ng-click attribute. A directive could be used but isn't necessary:
<div class="scrollable categories-container animated-fast slideInUp">
<div class="container categories">
<div class="col-xs-6" ng-repeat="category in allData.categories">
<div class="title" ng_click="selected_category = category">
{{ category.name }}
</div>
</div>
<div class="col-xs-6" ng-repeat="item in selected_category.items">
<div class="title">
{{ item.name }}
</div>
</div>
</div>
</div>
So when your categories data is loaded the first ng-repeat is populated with the categories. Each div with class title will have a function called on click which will make the selected_category object equal the selected category.
This will then cause the second view to be populated with all the items in the selected category by Angular's two way bind.