Hi I have certain amount data related to a customer. I need to get period of transactions of a customer and show to angular2 app.
I have one page with drop down list and output area. In dropdown items are like "Last one month transactions", "Last Three months transactions" and etc.
When I select a one of the item in dropdown I need show the all transactions in output area.
I am unable filter data using the pipes in angular2. Please send your thoughts about it. Thanks in advance.
[{
productNo:1,
productName: 'Toys',
quantity: 2,
purchaseDate: '2016/17/08'
},
{
productNo:1,
productName: 'Shoes',
quantity: 4,
purchaseDate: '2016/30/07'
},
{
productNo:1,
productName: 'Books',
quantity: 10,
purchaseDate: '2016/07/06'
},
{
productNo:1,
productName: 'Mobile',
quantity: 1,
purchaseDate: '2016/21/06'
}]
Related
Can anyone tell me, how to create a tree view inside the drop down. The drop down values will be getting from rest api call as json as follows. And subchild may contains one more level of child as well.
I have to do auto suggestion here to perform the filter from parent as well as the child level too.
VehicleList = [
{
parent: "audi",
child: [{
type: 'G-audiA',
subchild: [{
id: 1,
name: 'type audi A1'
}, {
id: 2,
name: 'type audi A2'
}]
}, {
type: 'G-audiB',
subchild: [{
id: 1,
name: 'type audi B1'
}, {
id: 2,
name: 'type audi B2'
}]
}]
}, {
parent: "bmw",
child: [{
type: 'G-bmwA',
subchild: [{
id: 1,
name: 'type bmw A1'
}, {
id: 2,
name: 'type bmw A2'
}]
}, {
type: 'G-bmwB',
subchild: [{
id: 1,
name: 'type bmw B1'
}, {
id: 2,
name: 'type bmw B2'
}]
}]
}]
Anyone help will be appreciated!!!
Based on the first example from the Angular Material Tree docs I managed to build up a drop-down with a tree structure inside like so:
The trick for displaying the tree is to add a disabled/empty option. I used it as a label. The tree is taken from their examples so I did not modify it at all, you can modify the node structure to match your own.
In order to display the selected items in the label of the drop-down, you can create a method that will return the selected items a string as their SelectionModel object has the selected property which would return all selected nodes.
/** The selection for checklist */
checklistSelection = new SelectionModel<TodoItemFlatNode>(
true /* multiple */
);
And in order to get the selected items from the tree:
return this.checklistSelection.selected.map(s => s.item).join(",");
For the filtering part I think you can look over this answer.
Hope this is helpful!
Stackblitz
Edit: If you select a child the parent gets selected too and added in the SelectionModel even if all its children are not selected. If you don't want this behaviour comment on the function descendantsPartiallySelected. This will not check the checkbox and so parents will not be added in SelectionModel unless all children are selected
I am new to lodash, and I have difficulty in formatting data that will display on an expanded table. I have a response of data from the server that looks like this:
[{Day: 1, ItemName: "Item1", Total: 1, Details: "Brand X", Quantity: 5, Part: "Part A"}]
And I wanted it to look like this:
[{
Day: 1,
ItemName: "Item1",
Total: 1,
ItemDetails: [{
Details: "Brand X",
Quantity: 5,
ItemParts: [{
Part: "Part A"
}]
}]
}]
I've used .chain and .GroupBy function and it displays on a table that shows the Day, ItemName and Total rows. Used .map function so when the user clicks the table row it expands and shows the ItemDetails.
But unfortunately i dont know how to display the last row or the third nested json data(which is ItemParts) that expands also when the user clicks the ItemDetails.
P.S. You can use any lodash function but please format the data to look like in the description above
P.S.S I only want to format JSON data response, I dont want to modify anything from my table
Something like this without lodash,
const arr = [{
Day: 1,
ItemName: "Item1",
Total: 1,
Details: "Brand X",
Quantity: 5,
Part: "Part A"
}]
const result = arr.map(x => ({
Day: x.Day,
ItemName: x.ItemName,
Total: x.Total,
ItemDetails: [{
Details: x.Details,
Quantity: x.Quantity,
ItemParts: [{
Part: x.Part
}]
}],
}))
console.log(result)
I want to implement payment request api to my website.
Payment request popup lists users saved cards associated with mobile phone and Google&Apple accounts.
I also want to put custom credit cards into that popup because we have already implemented save credit cards feature and it is been working for a while. I couldn't find any support for it reading documentations. Is it possible?
Expected to have a support like
var supportedInstruments = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard'],
supportedTypes: ['credit', 'debit']
},
customCards: [{ //Custom credit cards
number: '000000000000000',
owner: 'John Doe'
}]
}];
var details = {
total: {label: 'Donation', amount: {currency: 'USD', value: '65.00'}},
displayItems: [
{
label: 'Original donation amount',
amount: {currency: 'USD', value: '65.00'}
}
],
shippingOptions: [
{
id: 'standard',
label: 'Standard shipping',
amount: {currency: 'USD', value: '0.00'},
selected: true
}
]
};
var request = new PaymentRequest(supportedInstruments, details);
There's no such feature nor proposal as far as I know, though I have heard similar requests in the past.
One work around would be to implement a merchant specific payment method using the Payment Handler API. This API allows you to provide your own payment method. You can consume it by yourself and allow third parties to do so.
i need one help.I need to remove a particular row from a table using Angular.js .Here i have + and - button implementation.I have all my code inside https://plnkr.co/edit/D3UrDYwiglMKQyCW0wvW?p=preview
From the Plunkr suppose for Monday i did 3 entries using + button.when i am deleting the middle(second) row using - button this is deleting but it doing null to the 3rd row subcategory field and also displaying the different subcategory which is not belongs to that row category part.Here i need when user will delete any row that row value will delete not other row.All codes are present inside plunkr.Please help me.
I forked your plunker here
Some of the changes:
Defined listOfSubCategory in the controller as an array rather than having a function build it for each category.
Controller:
$scope.listOfSubCategory = [{
id: 1,
name: 'SubCategory 1',
value: 1,
category: 1
}, {
id: 2,
name: 'SubCategory 2',
value: 2,
category: 2
}, {
id: 3,
name: 'SubCategory 3',
value: 3,
category: 3
}, {
id: 4,
name: 'SubCategory 4',
value: 4,
category: 4
}];
Changed ng-options to filter the subcategories based on selected category.
HTML
ng-options="sub.name for sub in listOfSubCategory | filter:{ category: answer.category.id}"
Also, made some other minor changes, like having only on for all 's rather than one for each and used "track by $index" where needed.
Code for each product and it's catalogue information in drop down individually using AngularJS:
<ul style="height:250px;" >
<li data-ng-repeat="product in products" >
<div> {{SelectedOption.Price}} </div>
<select data-ng-model="SelectedOption" data-ng-init="SelectedOption=Catalogues[0]" data-ng-options="Catalogue as Catalogue.CName for Catalogue in Catalogues | filter:{ProductId:product.ProductId}:true" >
</select>
</li>
</ul>
Controller code is like this
var app = angular.module('myApp', []);
app.controller('myControl', function ($scope) {
$scope.products = [{ productname: 'Rice1', ProductId: 1}, { productname: 'Rice2', ProductId: 2 },{ productname: 'Rice3', ProductId: 3 }];
$scope.Catalogues = [{ ProductId: 1, CatalogueId: 1, CName: '25KG Bag', Price: 500, sortorder: 1 }, { ProductId: 1, CatalogueId: 2, CName: '50KG Bag', Price: 1000, sortorder: 2 },{ ProductId: 2, CatalogueId: 3, CName: '100KG Bag', Price: 1800, sortorder: 2 }];
Now want to set the default value of the each product catalogue.cname dynamically with the first value of the select drop down, Any idea? Much appreciated!
http://plnkr.co/edit/9MYrj1YJt7HzLR9FGDqD?p=preview
Plnkr result want to set for second drop down also with "100KG Bag"
To set the default value in the select, you need to set the ng-model as the first in the list you are using. Put this at the end of the controller:
$scope.SelectedOption = $scope.Catalogues[0];