I have a form where the user choose a supplier from a select box, then a button to choose an item.
When he click the button, a module open and he can search for items. Result came into a table in the module, next to each row there is a + symbol, when he clicks the +, the row come outside the module, and place itself in the table in the main form.
<table>
<tr ng-repeat="row in searchitems">
<td>...</td>
<td>...</td>
<td> <a data-dismiss="modal" ng-click="additemfound(row)"></a> </td>
</tr>
</table>
javascript code:
$scope.additemfound = function(row){
$scope.rowrequest.push(row)};
here i get the row that i chose from the module to the main form and the module close.
I need to push from the module multi row, not only one by one, any solution ?
in the table :
<tr ng-repeat =" row in rowssearchitems"" ng-class="{'selected':
row.selected}" ng-click="addItemFound(row)">
in js
$scope.addItemFound = function(row) {
row.selected ? row.selected = false : row.selected = true;
in html again:
<button ng-click="getallrows();">Get all rows </button>
js:
$scope.getallrows = function(){
var selectedrows = $filter("filter")($scope.rowssearchitems, {
selected : true}, true);
for (var i=0;i<selectedrows.length;i++){
var selectedrowsdata = selectedrows[i];
$scope.rowsrequests.push(selectedrows[i])}
What I did :
I gave a class selected to every row where the user click on the row and the class become selected true then a loop on all rows selected true and push those rows to the main table
Related
Below are two ngFor loops in HTML which are accessing elements when each of two seperate buttons are pressed.
<button (click)='payslips()'>Get Payslips</button>
<div>
<tr *ngFor="let payslip of objPayslips">----------->doesn't work, only works when 2nd button is pressed
<td>{{payslip.MonthYear}}</td>
</tr>
<h3>{{objPayslips | json}}</h3>-------->works fine
</div>
<button (click)='payslipdetails()'>Get Payslip Details</button>
<div>
<tr *ngFor="let index of objPayslipDetails;">
<td *ngIf="index.Addition">{{index.Addition}}</td>
<td *ngIf="index.AmountAddition">{{index.AmountAddition}}</td>
</tr>
<tr>
<td>Total Earnings: </td>
<td>{{payslipAdditionTotal}}</td>
</tr>
</div>
When Get Payslips is pressed then it's Object is generated and seen. But the same objects' values in the ngFor loop doesn't show up. But if I press the second button Get Payslip Details (which has a 2nd ngFor loop) then the values of 1st ngFor loop also show up. The two methods are completely different in the backend as well as the frontend. These methods are only run in a single HTML file. There is no link between these two methods anywhere. Then I don't know where is the problem. If I remove the 2nd button code entirely then the 1st code works fine which means that the ngFor loop shows values as it should. But both of them don't work properly alongside. Please have a look. Thankyou.
Edit:
Component.ts code:
payslipdetails(){
this.payrollService.getpayslipdetails(this.PId);
this.payslipEmployee=this.payrollService.objPayslipDetails[0];
this.objPayslipDetails=this.payrollService.objPayslipDetails;
//below code is to sum all the Earnings and Deductions. So to show their total values.
this.payslipAdditionTotal= this.payrollService.objPayslipDetails.filter((obj:any) => obj.AmountAddition).reduce((accumulator:any, obj:any) => {
return accumulator + obj.AmountAddition;
}, 0);
this.payslipDeductionTotal= this.payrollService.objPayslipDetails.filter((obj:any) => obj.AmountDeduction).reduce((accumulator:any, obj:any) => {
return accumulator + obj.AmountDeduction;
}, 0);
}
payslips(){
this.payrollService.getpayslips();
this.objPayslips=this.payrollService.objPayslips;
}
Service.ts code:
getpayslips(){
const headers = new HttpHeaders().set('Content-Type', 'application/json').set('Authorization','Bearer'+' '+GlobalService.authtoken);
return this.http.post<any>('http://localhost:3000/payroll/getpayslips/',null,{headers}).subscribe(({data}) => {this.objPayslips=data;})
}
getpayslipdetails(PId:number){
const headers = new HttpHeaders().set('Content-Type', 'application/json').set('Authorization','Bearer'+' '+GlobalService.authtoken);
return this.http.post<any>('http://localhost:3000/payroll/getpayslipdetails/',{"payslipId":PId},{headers}).subscribe(({data}) => {this.objPayslipDetails=data;})
}
This is an asychronous issue. You should grasp this concept before trying to use it.
In your service :
return this.http.post(...) // DO NOT put a .subscribe here
In your component TS file :
this.objPayslips = this.payrollService.getpayslips();
In your component HTML file :
<tr *ngFor="let payslip of objPayslips | async">
How do you perform multiple delete in nodeJs MySql? Where I need to check check-boxes to select the id's to be deleted in my blogger form.
front end
<% for(var i = 0 ; i < data.length ; i++) { %>
</td>
<td> <%= data[i].catname %> </td>
<td> <%= data[i].status %> </td>
<td> <%= data[i].id %> </td>
<td> delete</td>
<td> view</td>
<td> update</td>
<td> <input type="checkbox" name="check[]" value="data[i].id">delete <%=data[i].id %> </td>
<!-- making checkboxes -->
</tr>
back-end
app.post('/deletechecks',function(req,res){
var ch= req.body.check;
console.log(ch);
for(i=0;i<ch.length;i++)
{
var h= "delete from mydata where id='"+ch[i]+"''";
con.query(h,function(err,result){
if(submit==deleteselected)
{
console.log("deleted");
}
});
}
res.redirect('/viewdata');
});p.s i dont know what to do after this.
So hi there it's bit late while I am answering this .
So same situation I was there but the DB I was using was Mongo.
In my case it was a TO-DO list app where the user need to have a functionality of multipple delete so there were checkboxes were provided before the tasks.
I will attach a screenshot also for refernce.
While figuring it what I did I made a form there and first selected all task that I want to mark as done in case first and then hit delete so basically all will be deleted at once .
What happened I added a field 'name' in each task whose value I filled with the ObjectID in DB in order to make it unique OKAY! (As in the home page via EJS i had that info precomputed with me) (By EJS i mean View part or templating engine)
As once the Delete Button would be pressed (basically Submit) button then all these task values would be appended inside req.body (I think this you understad ) so what I did I casted the string values to ObjectID and called delete on the ID's .
So Now I am sending the pic and then code if still any issues in this do ask.
enter image description here The UI that I was talking above that will make things clear
And this is the delete function for reference :
Code:
app.post('/deleteTasks',function(req,resp){
let targetTask = req.body;
console.log('Hello there',targetTask);
let obj = [];
for(itr in targetTask){
const { ObjectId } = require('mongodb');
const _id = ObjectId(itr);
obj.push(_id);
}
console.log(obj);
for(itr of obj){
Task.findByIdAndDelete(itr,function(err){
if(err){
console.log('Error occured ',err.message);
return;
}
});
}
return resp.redirect('back');
});
Hope this can help and you can do some subsequent changes as per your quest .
I have a table that has js to allow me to sort the data. But I need to be able to change the data and have js still sort it when I click the header. I have a input box off to the side with a button. I am looking for a onclick way to change the table data from X to what is ever in that input box.
<td id="tabledata1">
1
</td>
I need to be able to change the "1" in that table data. I can not find the function code to effect that specific number. I am guessing it is something like this document.getElementById("tabledata1").style.color but instead of style.color there is something to reference table data.
It would look something like this
var cell = document.getElementById("tabledata1");
var button = document.getElementById("my-button");
var input = document.getElementById("my-input");
var par = document.getElementById("result");
button.addEventListener("click", function() {
cell.textContent = input.value;
});
<input id="my-input" type="text" />
<button id="my-button">Change Table Data</button>
<table>
<tr>
<td id="tabledata1">1</td>
</tr>
</table>
<p id="result"></p>
Breakdown
First query the document for the ids you want and store them into variables. You can then listen for the click event with the addEventListener function.
You can change the text of the table cell, by using the textContent property and setting it equal to the value of the input element.
Based on my searches when you want to hide the visibility of element in html using angularjs just used ng-show or ng-hide. In my page I have a table generated using ng-repeat.Each row have a button "show check". When the button is clicked the word "CHECK" should display beside the ID. Ng-show is working fine except when I clicked the button in the row with ID 1 all the rows display CHECK the, CHECK word should be display only in a row where I have click the button. What is missing? I try to passed the key parameter but it's not work. Any advice and suggestions would be appreciated. Thanks
My fiddle is : https://jsfiddle.net/DharkRoses/wydyagao/
I used this code so far:
$scope.myVar = true;
$scope.toggleShow = function(key){
alert(key);
$scope.myVar =!$scope.myVar;
};
You should add myVar for each user in the ng-repeat list.
<tr ng-repeat="user in users">
<td><p ng-show ="user.myVar">CHECK</p>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.stat}}</td>
<td><button id ="btn" ng-click = "toggleShow(user)">show check</button> </td>
</tr>
Then in your controller
$scope.toggleShow = function(user){
alert(user.myVar);
user.myVar =!user.myVar;
};
Im using an HTML select element to display an entity's field that has enumerated values in it.
Within the page, I have multiple fields for the entity, therefore multiple select elements.
Im using an Angular ng-repeat to display each field, by creating a select within the ng-repeat on my table row. I want to capture the "onselect" event when an item is selected from any of the drop downs, the trouble is, whenever the user selects a value in one drop down, the event fires for all drop downs on the page.
My html:
<div ng-app>
<div ng:controller="TodoCtrl">
<table>
<tr ng-repeat="prop in customForm">
<td>{{prop.legend}}</td>
<td>
<select ng-name="prop.name" ng-model="entity[prop.name]"
ng-options="val as val for val in prop.enumeratedValues"
onselect="{{fireSelectEvent(prop.name)}}"></select>
</td>
</tr>
<tr><td>Calls Made</td></tr>
<tr ng-repeat="call in callLog">
<td>{{call}}</td>
</tr>
</table>
</div>
</div>
My Controller:
//'use strict';
function TodoCtrl($scope) {
$scope.customForm =
[
{name:"aval", legend: "A Value", enumeratedValues: ["1","2","3"], editable: true},
{name:"bval", legend: "B Value", enumeratedValues: ["4","5","6"], editable: true},
{name:"cval", legend: "C Value", enumeratedValues: ["7","8","9"], editable: true}
];
$scope.entity = {};
$scope.callLog = [];
$scope.fireSelectEvent = function( propName )
{
console.log("Prop=" + propName + " value=" + $scope.entity[propName]);
$scope.callLog.push( propName );
}
}
My fiddle:
http://jsfiddle.net/utgwG/
Good luck. We're all counting on you.
What is the onselect attribute? You're seeing fireSelectEvent fire that many times, because you've bound the onselect attribute using Angular interpolation.
What I'm guessing you want to do is: ng-change="fireSelectEvent(prop.name)"
Your updated fiddle: http://jsfiddle.net/utgwG/2/