निम्नलिखित छवि में, मैं केवल सिंगल-आइटम चयन बटन रखना चाहता हूं और सभी बटन चुनें (काले बुलबुले द्वारा चिह्नित) को हटा दें।

picklist screenshot

मैं सूची बनाने के लिए PrimeNG पिकलिस्ट का उपयोग कर रहा हूं।

क्या कोई मेरी मदद कर सकता है?

0
poopp 1 अप्रैल 2020, 19:03
आप इसे बटन विशेषता में *ngIf द्वारा कर सकते हैं
 – 
RBC
1 अप्रैल 2020, 19:21

4 जवाब

प्राइमएनजी के पास बटन हटाने का कोई विकल्प नहीं है। लेकिन हम इसे लिस्टबॉक्स के साथ कर सकते हैं।

चरण 1: app.module.ts . में ListboxModule आयात करें

import {ListboxModule} from 'primeng/listbox';
...
imports: [
ListboxModule
...
],

चरण 2: app.component.html

<div class="container-fluid">
<div class="row">
    <div class="col-md-3">
        <p-listbox [options]="users" filter="filter" multiple="true" checkbox="true"
        [style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
        [(ngModel)]="selectedUserList"></p-listbox>
    </div>
    <div class="col-md-2">
        <div class="my-2 ml-3"><i class="pi pi-angle-double-right clickable"
            (click)="moveUserToGroupMember()"></i></div>
        <div class="my-2 ml-3"><i class="pi pi-angle-double-left clickable" 
            (click)="moveGroupToUser()"></i></div>
    </div>
    <div class="col-md-3">
        <p-listbox [options]="groupUserList" filter="filter" multiple="true" checkbox="true"
        [style]="{'width':'100%'}" [listStyle]="{'max-height': '200px'}" [metaKeySelection]="false"
        [(ngModel)]="selectedGroupUsersList"></p-listbox>
    </div>
</div>

चरण 3: app.component.ts फ़ाइल पिकलिस्ट की मैन्युअल कार्यक्षमता के साथ

export class AppComponent {
public users = [];
public groupUserList = [];
public selectedUserList:any;
public selectedGroupUsersList:any;
constructor AppComponent(){
this.users = [
    { label: 'Ganesh', value: '3' },
    { label: 'John', value: '1' },
    { label: 'Joshua', value: '2' },


  ];
  this.groupUserList = [
    { label: 'Vetri', value: '5' },
    { label: 'shiva', value: '6' },
  ];
};


  moveUserToGroupMember() {
    this.users.forEach((elem, index) => {
      this.selectedUserList.forEach((selUser, indexes) => {
        if (selUser === elem.value) {
          this.groupUserList.push(elem);
          setTimeout(() => {
            this.removeByAttr(this.users, 'value', selUser);
          }, 500);
        }
      });
    });
  }
  moveGroupToUser() {
    this.groupUserList.forEach((elem, index) => {
      this.selectedGroupUsersList.forEach((selUser, indexes) => {
        if (selUser === elem.value) {
          this.users.unshift(elem);
          setTimeout(() => {
            this.removeByAttr(this.groupUserList, 'value', selUser);
          }, 500);
        }
      });
    });
  }

  removeByAttr = (arr, attr, value) => {
    let i = arr.length;
    while (i--) {
      if (arr[i]
        && arr[i].hasOwnProperty(attr)
        && (this.users.length > 0 && arr[i][attr] === value)) {

        arr.splice(i, 1);

      }
    }
    return arr;
  }

}

आप चयनित उपयोगकर्ता सूची से चयनित उपयोगकर्ता प्राप्त कर सकते हैं: कोई भी और चयनित समूह उपयोगकर्ता सूची: कोई भी। बस अब आप उपयोगकर्ताओं को एक सूची से दूसरी सूची में ले जाने में सक्षम हो सकते हैं।

अधिक संदर्भ के लिए:

helperscript.com

डेमो छवि

1
Jasim Jas 26 अप्रैल 2020, 16:35

यह मेरे लिए काम करता है। अक्टूबर 2021 में अभी भी इन बटनों को छिपाने के लिए कोई संपत्ति नहीं है।

  ::ng-deep .p-picklist-buttons > button:nth-child(2),
  ::ng-deep .p-picklist-buttons > button:nth-child(4) {
      display: none;
    }
1
Matteoni 20 अक्टूबर 2021, 11:45

p-picklist को देख रहे हैं स्रोत, आप इन बटनों की CSS डिस्प्ले प्रॉपर्टी को none पर सेट कर सकते हैं। लेकिन वास्तव में उन्हें कार्यान्वयन से हटाने के लिए, कोई आउट-ऑफ-द-बॉक्स समाधान नहीं है। आपको इसे विस्तारित करने और इसे स्वयं हटाने की आवश्यकता है।

निम्नलिखित सीएसएस का प्रयास करें

button[icon="pi-angle-double-right"],
button[icon="pi-angle-double-left"] {
  display: none !important;
}
0
Michael D 1 अप्रैल 2020, 19:21
setTimeout(() => {
      let doubleRight = document.getElementsByClassName("pi-angle-double-right");
      let doubleLeft = document.getElementsByClassName("pi-angle-double-left");
      doubleRight.item(0).parentElement.style.display="none"
      doubleLeft.item(0).parentElement.style.display="none"
}, 100);

:)

-1
Jhonattan Oliveira 15 जिंदा 2021, 03:29