I have one list in that on click of each item one class is toggle in that list. Here is my code
My Code
I am toggling class in list. I want to remove unselected element from list when user click on "ADD" button. I have done till toggle class in list but I am facing problem while removing items on basis of css class. Please help.
if i understood exactly what you need, that you want to delete the unselected items when clicking the button ADD,
then add this to your button.
<button (click)="removeUnSelected()">ADD</button>
and add this function to your app.ts file
removeUnSelected() {
console.log(this.items[0].active);
// check if enything is selected first
let flag=0;
let i=0;
for(i=0;i<this.items.length;i++) {
if(this.items[i].active) {
flag=1;
break;
}
}
if(flag){
for(i=0;i<this.items.length;i++) {
if(!this.items[i].active) {
this.items.splice(i, 1);
i--;
}
}
}
}
i tried it already... this will delete the items from the array if they are not selected when clicking the button.
Try this:
DEMO
deleteNotSelect() {
let data = this.items.filter(data => data.active == true)
if (data.length > 0) {
this.items = data;
}
}
Use a forEach loop to toggle false the active propery of the item:
add() {
this.items.forEach(function(v,i){
v.active = false;
})
}
demo
Related
0
this is my code now
template file:
<quill-view-html [content]="question.questionText" format="html" theme="snow" [id]="question.id" [change]="loadAnswer(studentAnswer)"
.ts file:
loadAnswer(studentAnswer) {
if (document.getElementById(question.id)) {
let inputs =
document.getElementById(question.id).getElementsByTagName('input') || [];
inputs.forEach((input, index) => {
input.value = studentAnswer[index]
})
}
}
the answer gets display in the input box but i am not able to type a new answer over it since the previous answer gets coming back. Any solution to this?
Firstly, let's make your code more pretty.
loadAnswer(studentAnswer){
if (document.getElementById(question.id)) {
let inputs = document.getElementById(question.id).getElementsByTagName('input') || [];
inputs.forEach((input, index) => {
input.value = studentAnswer[index]
})
}
}
Can you share your template code with us? Function looks good.
I'm using react-router-dom and what I want is to be able to close a Modal when I click browser back button.
Also, in my scenario, the modal component is not the part of Switch. So how can I close the modal.
Thanks in advance. :)
You could probably use something like this to detect the press of the Back button.
componentDidUpdate() {
window.onpopstate = e => {
}
}
And then, depending on your modal (Bootstrap or something else) you can call .hide() or .close().
I've made a simple hook called useAppendLocationState that does all the job:
function SomeComponent() {
const [showModal , appendShowModal ] = useAppendLocationState('showModal');
return (
<div>
<div>...some view...</div>
<button onClick={() => appendOpenModal(true)}>open modal</button>
{showModal && <SomeModal closeHandler={() => window.history.back()} />}
</div>
)
}
useAppendLocationState returns a array with two entries just like useState, The first entry is the state prop value coming from browser location state and the second entry is a method that pushes a new item to browser history with new state prop appended to current location state.
here is our useAppendLocationState definition:
import { useHistory } from 'react-router';
export function useAppendLocationState(key) {
if (!key) throw new Error("key cannot be null or empty value")
const history = useHistory()
const currentLocationState = history.location.state;
const appendStateItemValue = (value) => {
const newLocationState = { ...currentLocationState }
newLocationState[key] = value;
history.push(history.location.pathname, newLocationState)
}
const stateItemValue = history.location.state && history.location.state[key]
return [stateItemValue, appendStateItemValue]
}
export default useAppendLocationState
Have you tried: ComponentWillUnmount?
I am working on adding and deleting a set of fields in a row, i am able to do this via the following code,
but will have to limit it to a certain number, how would i be able to do that? Thanks in advance
The below is the code.
I am using an array and then using add and delete function for
Component File
`
get formArr(){
return this.finDetailsForm.get('itemRows') as FormArray;
}
initItemRows(){
return this.fb.group({
acc_name: '',
inv_amt: '',
v_inv_date: '',
});
}
addNewRow(){
this.formArr.push(this.initItemRows());
}
deleteRow(index: number) {
this.formArr.removeAt(index);
}
Attaching an image below of it
you can count length of array before push element.
addNewRow(){
if(this.formArr.lenght < 5){
this.formArr.push(this.initItemRows());
}
}
You have 2 solutions:
Update your component function as below:
class YourComponent {
private static MAX_ITEMS = << a number >>;
// ... constructor and rest ...
addNewRow(): void {
if (this.formArr.length < YourComponent.MAX_ITEMS) {
return;
}
this.formArr.push(this.initItemRows());
}
or you simply hide the button "+" when you reached the maximum item you want:
your-component.ts
get maxItemsReached(): boolean {
return this.formArr.length >= YourComponent.MAX_ITEMS;
}
your-component.html
<input type="button" *ngIf="!maxItemsReached">Add</input>
I want to reset the ng-multiselect-dropdown. Is it necessary to put it in a form ?
code -
app.component.html
<div>
<p id = "node">Select a Root API Object - </p>
<p style="width:50%">
<ng-multiselect-dropdown [placeholder]="'Select Root API Object'" [data]="dropdownListRoot" [(ngModel)]="selectedItemsRoot" [settings]="dropdownSettingsRoot"
(onSelect)="onItemSelectRoot($event)" (onSelectAll)="onSelectAllRoot($event)">
</ng-multiselect-dropdown>
</p>
</div>
app.component.ts
export class HierarchySearchComponent implements OnInit {
onItemSelectRoot(item: any) {
this.onlyRootItemSelect = true; // for cypher also.
console.log(item);
this.rootItem = item;
this.nodeSelect = true;
this.rootItemText = this.rootItem.item_text;
console.log("this.rootItemText = ", this.rootItemText);
}
onSelectAllRoot(items: any) {
console.log("On Item select all" + items);
this.nodeSelect = true;
}
}
it is not necessary to put it in form.
Just make the selectedItemsRoot array empty. Call this function resetSelection() from the element/context.
if you are using the button to clear selection, it can be
.html
`<button (click)="resetSelection()" >clear</button>`
.ts
resetSelection() {
this.selectedItemsRoot = [];
}
It is not necessary to put it in a form - if you want to clear the selected items, just set the selectedItemsRoot object to an empty array. I.e.
clearSelection() {
this.selecteditemsRoot = [];
}
And bind that function to a button, or call it with any other method you are using to clear the selection.
if you are using formControlName instead of ngModel then you can use something like this
this.myForm.get(formControlName).setValue([]);
The problem I'm having is that if a user clicks to edit a cell but then does something on another view that re-renders the BootstrapTable, the cell is still focused and retaining the old value until the user clicks somewhere else on the table.
I tried the following:
onBootstrapTableRef(instance) {
this.bootstrapTableRef = instance;
}
componentDidUpdate() {
this.bootstrapTableRef.reset(); //feel like either of these lines should do the job
this.bootstrapTableRef.cleanSelected();
}
public render() {
const cellEdit = {
mode: "click",
blurToSave: true
}
return (
<BootstrapTable data={this.props.settings} keyField="settingStage"
bordered={false} striped cellEdit={cellEdit} ref={this.onBootstrapTableRef}>
...
</BootstrapTable>
</div>
</div>
);
}