I have create table and inserted values. Now I need to access some of table data and assign into variable for calculation. here I need to calculate total of those column values and assign to label. So may I know the way ??
This is the table I have created.
render(){
return (
<tr>
<td data-th="Product">
<div className="row">
<div className="col-sm">
<h4 className="nomargin">{this.DrugsDetailsRequest.item_name}</h4>
</div>
</div>
</td>
<td data-th="Price"> Rs: {this.DrugsDetailsRequest.totalPrice}</td>
<td data-th="Quantity">
<input name="textInputValue1" type="number" className="form-control text-center" onChange={ this.handleChange } />
</td>
<td data-th="Subtotal" className="text-center"> <input name="textInputValue2" type="number" className="form-control text-center" onChange={ this.handleChange } value={this.DrugsDetailsRequest.totalPrice*this.state.textInputValue1}/></td>
<td className="actions" data-th="">
<button className="btn btn-info btn-sm mr-3" onClick={ this.publish }><i className="fa fa-refresh"></i>Refresh</button>
<button className="btn btn-danger btn-sm" onClick={(e) => this.delete(this.DrugsDetailsRequest._id)}><i className="fa fa-trash-o">Delete</i></button>
</td>
</tr>
);
}
Your question isn’t clear but this is what I understand
A simple solution is. Do this in render before return
const total = this.DrugsDetailsRequest.totalPrice + this.DrugsDetailsRequest.totalPrice*this.state.textInputValue1
console.log(total);// this will get you the total
Related
I have to change some users point, so in loop how can i take that input value. Without hook
Use state! How can i declare many state. In loop ?
{this.state.data.map((user, index) => (
<tr key={user.id}>
<th scope="row" className="text-center">
{index + 1}
</th>
<td id="_lastname">{user.last_name}</td>
<td id="_firstname">{user.first_name}</td>
<td className="text-center">{user.category}</td>
<td className="text-center">
<input
type="text"
placeholder={user.point}
name="point"
/>
</td>
<td className="text-center">
<button
name="change"
value="true"
onClick={(e) => this.updateHandler(e)}
>
<i className="fas fa-check-circle">upd</i>
</button>
<button name="delete" value="true">
<i className="fas fa-times-circle">del</i>
</button>
</td>
</tr>
))}
Please note i just need that input value.
You want a dynamic input handler for you inputs.
You can have an state field for the input that is an object.
this.state = {
userPoints: {}
}
Then onChange handler to handle the dynamic inputs
handleDynamicInput = (id, event) => {
this.setState(prevState => ({
userPoints: [...prevState.userPoints, {[id]: event.target.value}]
}))
}
And your input should have the handler bind the user so you can update the state with the userid and userpoint.
<td className="text-center">
<input
value={this.state.userPoints[user.id] || ''}
onChange={this.handleChange.bind(this, user.id)}
type="text"
placeholder={user.point}
name="point"
/>
</td>
You userPoint state field should look like this
userPoints: {
...,
{userId: userPoint},
...
}
I have a component, called Bucket, each bucket can have multiple challenges, it looks like this,
The code I have is like this, (much-simplified version)
class CLL_Bucket extends Component {
constructor(props) {
super(props);
this.state = {};
this.state = {
…
bucketChallengesIdx: 0, // to track the index of challegnes
bucketChallenges: this.props.bucket.bucketChallenges || [],
…
};
…
this.onBucketChallengeAdd = this.onBucketChallengeAdd.bind(this);
this.onBucketChallengeIDChanged = this.onBucketChallengeIDChanged.bind(this);
this.onBucketChallengeWeightChanged = this.onBucketChallengeWeightChanged.bind(this);
}
render() {
const bucketIdx = this.props.idx;
return (
<div style={styles.container}>
<div key={bucketIdx} className="row" style={styles.bucketStyle}>
<div className="col-md-2">
…
</div>
<div key={bucketIdx} className="col-md-4">
<div>
<label>
<span className="text-center">Challenges<span>
</label>
<button type="button" className="btn btn-success btn-sm" onClick={() => this.onBucketChallengeAdd()}>Add Challenge</button>
</div>
<table className="table table-bordered table-striped show">
<thead>
<tr>
<th>Challenge ID</th>
<th>Weight</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{this.state.bucketChallenges.map(this.renderBucketChallenges.bind(this))}
</tbody>
</table>
</div>
…
</div>
</div>
);
}
renderBucketChallenges(bucketIdx, idx){
return (
<tr key={idx}>
<td className="col-xs-3 input-group-sm">
<Select
options={challengeIDOptions}
defaultValue={challengeIDOptions[0]}
onChange={this.onBucketChallengeIDChanged.bind(this, idx)}
value={this.state.bucketChallengesID}
isSearchable={true}
/>
</td>
<td className="col-xs-1 input-group-sm">
<input type="text" className="form-control" value={this.state.bucketChallengesWeight}
onChange={(e) => this.onBucketChallengeWeightChanged(idx, e)} disabled={this.props.readOnly}>
</input>
</td>
<td className="col-xs-1 input-group-sm">
…
</td>
<td className="col-xs-1 input-group-sm">
<input className="btn btn-danger btn-sm" id="deleteButton" type="button" value="Delete" onClick={() => this.onDeleteChallenge.bind(this, bucketIdx, idx)} />
</td>
</tr>
);
}
onBucketChallengeAdd(){
var newChallengeIndex = this.state.bucketChallengesIdx + 1;
console.log("onBucketChallengeAdd(): " + newChallengeIndex);
this.setState({bucketChallengesIdx: newChallengeIndex});
this.props.onAddChallenge(this.props.idx, newChallengeIndex);
}
The problem I’m having is, when I click the “Add Challenge” button, I can see from the React developer tool that a new challenge is being added, even though the UI is not updated. When I go to a different tab of my app and come back, the UI is added (a new row for the added challenge is there). Why? Any suggestion on how to fix this? Thanks!
The bigger question is, am I on the right track to make this happen? or i should extract challenge portion to a different component?
I have following code. I want to show a value in select from infoData--> selection field, but failed.
<tbody>
<tr ng-repeat="emp in infoData">
<td>
<input name="selection{{$index}}" ng-model="emp.name" ng-disabled="!enabledEdit[{{$index}}]" />
</td>
<td>
<select name="name{{$index}}" ng-model="emp.selection" ng-options="employe.id as employe.name for employe in designationList" ng-disabled="!enabledEdit[{{$index}}]"></select>
</td>
<td>
<input name="email{{$index}}" ng-model="emp.email" ng-disabled="!enabledEdit[{{$index}}]"/>
</td>
<td >
<div class="buttons" align="center">
<button class="btn btn-sm btn-primary" ng-click="editEmployee($index)">Edit</button>
<!--<button class="btn btn-sm btn-danger" ng-click="deleteEmployee($index)">Delete</button>-->
</div>
</td>
</tr>
</tbody>
How to select selection value in infoData in select ?
$scope.infoData = [
{ name: $scope.applicant, selection: "Debtor", email:"a#gmail.com"},
{ name: $scope.secureParty, selection:"Secured Party", email:"b#gmail.com"}
];
and
$scope.designationList = [
{name:"Debtor", id:"1"},
{name:"Secured Party", id:"2"}
];
Here I want to see a selected value in select
My AngularJS validation does not work. I have added ng-required. Please let me know where I am missing
<ng-form id="frmdisbursementScheduleMaintenance">
<div style="padding-bottom: 8px;">
<button id="cm-SaveBtn" name="cm-SaveBtn" type="button" ng-click="submitted=true">Save</button>
<button id="cm-RefreshBtn" name="cm-RefreshBtn" type="button">Refresh</button>
</div>
<div>
<table>
<tr>
<td><span class="VNAVLabel">Process Begin Date: </span></td>
<td>
<span><input type="date" name="processBeginDate" ng-model="processBeginDate" required></span>
<span ng-show="(frmdisbursementScheduleMaintenance.processBeginDate.$dirty || submitted) && frmdisbursementScheduleMaintenance.processBeginDate.$error.required">
Process Begin Date is required
</span>
</td>
</tr>
</table>
</div>
</ng-form>
It shouldn't be id, you should use name attribute instead. Angular will create $scope variable with name frmdisbursementScheduleMaintenance which will contain form information.
<ng-form name="frmdisbursementScheduleMaintenance">
Use 'name' instead of 'id' for the form element.
Also, you do not have to check for (frmdisbursementScheduleMaintenance.processBeginDate.$dirty || submitted) only frmdisbursementScheduleMaintenance.processBeginDate.$error.required would do the job.
<ng-form name="frmdisbursementScheduleMaintenance">
<div style="padding-bottom: 8px;">
<button id="cm-SaveBtn" name="cm-SaveBtn" type="button" ng-click="submitted=true">Save</button>
<button id="cm-RefreshBtn" name="cm-RefreshBtn" type="button">Refresh</button>
</div>
<div>
<table>
<tr>
<td><span class="VNAVLabel">Process Begin Date: </span></td>
<td>
<span><input type="date" name="processBeginDate" ng-model="processBeginDate" required></span>
<span ng-show="frmdisbursementScheduleMaintenance.processBeginDate.$error.required">
Process Begin Date is required
</span>
</td>
</tr>
</table>
</div>
</ng-form>
I have 3 button group, refresh button and table.
ALL | Dover | Orlando
On page load, All the data is displayed in table by calling api.
Using angularjs filter i have filtered data based on city i.e Dover or Orlando.
Current scenario:
When user is on Dover and clicks refresh button all the data is loaded again i.e ALL and Refresh are have same api call.
Required scenario:
When user is on Dover and clicks refresh button only Dover data should get refresh.
code:
<div class="myrow">
<div class="col-md-6 col-sm-6">
<label for="documentStatus">Queues: </label>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary active" ng-click="updateData(); myFilter = null">ALL</button>
<button type="button" class="btn btn-primary" ng-click="myFilter = {city : 'Dover'}">Dover</button>
<button type="button" class="btn btn-primary" ng-click="myFilter = {city : 'Orlando'}">Orlando</button>
</div>
</div>
</div>
<div class="container" ng-init="updateData()">
<div class="pull-right">
<button type="button" class="btn btn-primary btn-md" value="Refresh" ng-click="myFilter = null; updateData()">
<span class="glyphicon glyphicon-refresh"></span> Refresh
</button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th>Queue</th>
<th>No of Documents</th>
<th>Oldest document Datetime</th>
<th>Allocated Users</th>
</tr>
</thead>
<tbody ng-repeat="queue in Queues | filter: myFilter">
<tr>
<td>
<label class="checkbox-table">
<input type="checkbox" name="checkbox" ng-model="queue.isChecked" id="check-box-{{$index}}">
</label>
</td>
<td class="col-md-3">{{ queue.queue }}</td>
<td class="col-md-2">{{ queue.noOfDocuments }}</td>
<td class="col-md-2">{{ queue.oldestDoc}}</td>
<td class="col-md-5">{{ queue.allocatedUsers}}</td>
</tr>
</tbody>
</table>
</div>
You can try use angular.copy(arr):
var data = {
original: myOriginalData,
filteredData: angular.copy(myOriginalData) //this is unbind link on the arrayy
};