I need to save all changes from editable fields in table.
<tbody>
<tr *ngFor="let a of arr; let i = index">
<td contenteditable>{{a.text}}</td>
<td contenteditable type="number" pattern="[0-9]">{{a.number}}</td>
</tr>
</tbody>
<button class="btn btn-success" (click) = "saveAllChanges()">Save all </button>
--
saveAllChanges(){
for(let a of this.arr){
this.myservice.updateRepeat(r)
}
}
Objects in array arent saved after edit on grid so it doesnt work.
Any idea how can i save all changes?
Related
i have a table which are having mat-icon-buttons after clicking on button it should display 2 buttons at end of the table.
if i click on button it chaining color from primary to red color and now i want to 2 buttons for this button i mean after clicking button at the end after complication of table it should display buttons ( edit and save). i would like know how add that 2 buttons end of the table when we clicked mat-icon-button.
please help me in these.
Thanks.
<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="data.isClicked = !data.isClicked" [ngClass]="{'myClass': data.isClicked}">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<tr>
You can use your already implemented data.isClicked property to handle the visibility of the other buttons. If they should only be visible, if the first button is clicked just do it like this:
<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="data.isClicked = !data.isClicked" [ngClass]="{'myClass': data.isClicked}">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<td *ngIf="data.isClicked">
<button>Edit<button>
<button>Save<button>
</td>
<tr>
EDIT After clarification:
Just combine your actions in a Click Mehtod then:
Your HTML File:
<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="clickEvent(data)" [ngClass]="{'myClass': data.isClicked}">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<tr>
<div*ngIf="showButtons">
<button>Edit<button>
<button>Save<button>
</div>
And your .ts File:
showButtons: boolean = false;
clickEvent(data){
data.isClicked = !data.isClicked;
this.showButtons = !this.showButtons;
}
.myClass{
color : red;
}
I need to change button color into red (primary color to red color) after clicking button, but it is change color of all buttons in a row but I need only selected button to change color.
<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="isClicked = !isClicked" [class.myClass]="isClicked">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<tr>
isClicked property should be part of data object. dynamic classes can be added to the DOM using ngClass attribute.
.myClass{
color : red !important;
}
<tr*ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="data.isClicked = !data.isClicked" [ngClass]="{'myClass': data.isClicked}">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
<tr>
instead of declare field isClicked as boolean type, you should declare it as an object isClicked = {}. And this should be set for each row according to data.id
<tr *ngFor="let data of database ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="isClicked[data.id] = !isClicked[data.id]" [class.myClass]="isClicked[data.id]">
<mat-icon>remove_circle</mat-icon>
</button>
</td>
</tr>
You need to set isClicked as an array in your component class:
isClicked: Array= [];
And declare a variable i in your template
<tr *ngFor="let data of database, let i = index ">
<td>{{data.name}}</td>
<td>{{data.id}}</td>
<td>
<button mat-icon-button color="primary" (click)="isClicked[i] = !isClicked[i]"
[class.myClass]="isClicked[i]">test
</button>
</td>
try this for your red button,
<button class="btn btn-danger"></button> or
<button class="btn btn-outline-danger"></button>
i'm iterating through map where key and value pair is there and i'm not getting how to apply pagination of those data where that map data is generated from the database directly.i'm iterating through map where key and value pair is there and i'm not getting how to apply pagination of those data where that map data is generated from the database directly.
<table>
<thead></thead>
<tbody>
<tr>
<td><marquee>
<h3>
A tag is a keyword or label that categorizes your question with
other, similar questions. Using the right tags makes it easier
for others to find and answer your question.
</h4>
</marquee>
<hr></td>
</tr>
<tr ng-repeat="(key,value) in tagForm.data track by $index">
<td align="left">
<div ng-init='tagForm.getTag(key)'
class=" w3-container w3-card w3-white w3-margin w3-round "
style="padding-left: 40px; padding-right: 40px;">
<br>
<p ng-repeat="data2 in tagForm.message track by $index">
<a ng-click="tagForm.getAnswer(key)">Q. {{value}}</a> <span
class="badge">{{data2}}</span> <br>
</p>
<ul ng-repeat="(key2,value2) in tagForm.ans track by $index">
<li><b ng-if="key==key2">Ans. {{value2}}</b></li>
</ul>
<div ng-init='tagForm.getUser(key)'>
<b>Posted
by:{{tagForm.user2[$index]}}</b>
</div>
<button class="btn btn-default" id="{{$index}}"
ng-click="count1=count1+1" ng-init="count1=5+($index*3)-5">
Upvote <span class="badge">{{count1}}</span>
</button>
<button class="btn btn-default" id="{{$index}}"
ng-click="count=count+1" ng-init="count=1+($index*2)">
Downvote<span class="badge">{{count}}</span>
</button>
<button class="btn btn-default" ng-click="gotoanswer()">Answer
this question</button>
<br> <br />
</div> <br>
</td>
<td height=100px><br /></td>
</tr>
</tbody>
</table>
use the following pagination in your html file
<uib-pagination ng-show="isPaginate == false "
total-items="totalItems" ng-model="currentPage"
boundary-links="true" items-per-page="numPerPage"
class="pagination-sm" ng-change="pageChanged()" max-size="5">
</uib-pagination>
and then initialize the variable as per requirement in angular controller
$scope.totalItems = 80;//length of records
$scope.currentPage = 1;
$scope.numPerPage = 10;
var startpos = 0;
for dynamically loading records (loading records batch wise instead of loading all at time) refer following function
$scope.pageChanged = function() {
// if($scope.currentPage!=1)
$scope.isCollapsed = false;
$scope.isRCollapsed = false;
$scope.page = ($scope.currentPage - 1) * $scope.numPerPage;
callApi($scope.page);//get next set of 10 records
console.log('Page changed to: ' + $scope.currentPage);
};
I have this simple Angular2/html table:
<tr *ngFor="let item of mf.data; let i = index;">
<td><input type="checkbox" value="" [(ngModel)]="item.checked" ></td>
<td>{{i}}</td>
<td>{{item.name}}</td>
<td>{{item.password}}</td>
<td>{{item.number}}</td>
<td>Infos</td>
<td><button type="button" class="btn btn-success" [disabled]="!item.checked">start</button></td>
</tr>
I would like to hide field password with ***** or ....., but display clear text when mouse hovers in and hide when mouse hovers out. Basically, I is sensitive data and I don't want some one to be able to take a photo when I open my app. How can I do this ?
Use the mouseover and mouseout events and bind a display variable to them.
E.g.:
<td (mouseover)="displayPassword = true" (mouseout)="displayPassword = false">{{displayPassword? item.password : '****'}}</td>
maybe something like this could do the trick :
// not working <td title="{{item.password}}">{{item.password.split('').forEach(p => '*')}}</td>
<td title="{{item.password}}">******</td>
I have finally found something that work find. Fill free to improve this solution.
Basically I added an index to every of my rows.
<td align="center" (mouseover)="displayPassword(item.index)" (mouseout)="hiddePassword(item.index)">{{item.showpassword? item.password:'00000000000000000000000000000000000'}}</td>
In my app.component.ts, I added this two functions:
displayPassword(index){
console.log(index)
this.data[index].showpassword = true;
}
hiddePassword(index){
this.data[index].showpassword = false;
}
now it is working as expected ...
I have an observableArray self.CustomerOrders which I populate with
self.CustomerOrders.push(new CustomerOrder(self.getOrderId(), today.toLocaleDateString() , self.selectedCustomer2(), JSON.stringify(self.cart(),null,4)));
where
self.getOrderId() is a method to get an Id for the order,
today.toLocaleDateString() prints today's date,
self.selectedCustomer2 is the selected customer of the order and
self.cart is another observableArray which includes all ordered items.
Here is how I populate self.cart
self.cart.push(new orderedItem(product.id, product.name, product.price, product.quantity()));
and here is my foreach
<tbody data-bind="foreach: CustomerOrders">
<tr>
<td data-bind="text: id"></td>
<td data-bind="text: date"></td>
<td data-bind="text: customer"></td>
<td data-bind="text: details"></td>
<td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#display-order">View</a>
</td>
<td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#edit-order">Edit</a>
</td>
<td data-bind="click: $parent.selectedOrder"><a class="btn btn-primary" data-toggle="modal" data-target="#delete-order">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
I succeed in saving all those data to the CustomersOrders observable array and then I print them in my UI using foreach. My problem is that the self.cart items are printed as JSON and I do not want to display JSON to the user but HTML.
How to implement this ?
Any ideas ?
Ok, so don't JSON.stringify your cart. Then, assuming your Details binding is where the cart part is supposed to end up, and it's supposed to be an array, you can just nest foreach bindings like this:
<td>
<ul data-bind="foreach: details">
<li data-bind="text: someProperty"></li>
</ul>
</td>
where someProperty is whatever property of the cart you want to display.
Of course, you can choose whatever html elements suit your requirements.
My problem is that the self.cart items are printed as JSON
Well, that's not surprising.
self.CustomerOrders.push(
new CustomerOrder(
self.getOrderId(),
today.toLocaleDateString(),
self.selectedCustomer2(),
JSON.stringify(self.cart(),null,4) /* guess what that does */
)
);
Just do
self.CustomerOrders.push(
new CustomerOrder(
self.getOrderId(),
today.toLocaleDateString(),
self.selectedCustomer2(),
self.cart
)
);
and use regular knockout bindings in your view to display the cart.