I have upgraded my Angular PrimeNG app from v9 to 11. Dropdown lazy loading has stopped working and event onBranchLazyLoadEvent isn't called now. Below is the sample code
<p-dropdown id="field_branch" name="branch" [options]="branchOptions" formControlName="branchId"
[virtualScroll]="true" [lazy]="true" [rows]="10" (onLazyLoad)="onBranchLazyLoadEvent($event)" [lazyLoadOnInit]="true" [filter]="true"
placeholder="Choose" optionLabel="name" optionValue="id"></p-dropdown>
What could be wrong here?
Latest versions doesn't support dropdown lazyloading
Reference to latest dropdown source dropdown source
Some open issues about it with working lazy dropdown repo fork by #yelhouti 7284
5955
Since primeng 14 this is again supported (below is their official example with lazy loading and virtual scroll).
<h5>Virtual Scroll (100000 Items) and Lazy</h5>
<p-dropdown [options]="lazyItems" [(ngModel)]="selectedItem2" placeholder="Select Item" [virtualScroll]="true" [virtualScrollItemSize]="38" [lazy]="true" (onLazyLoad)="onLazyLoad($event)" [virtualScrollOptions]="{ showLoader: true, loading: loading, delay: 250 }">
<ng-template pTemplate="loader" let-options="options">
<div class="flex align-items-center py-2 px-3" style="height: 38px">
<p-skeleton [width]="options.even ? '60%' : '50%'" height="1rem"></p-skeleton>
</div>
</ng-template>
</p-dropdown>
Even though the primeng 14 documentation says it's supported, it doesn't truly work. Not even on the example page and there is very little saying about this.
In PrimeNG 13, where the option lazy doesn't exist, I managed to hack it like this (and I assume it will work for earlier versions like your 11):
<p-dropdown
[options]="tags$ | async"
formControlName="tag"
appendTo="body"
optionLabel="name"
optionValue="code"
[showClear]="true"
[emptyMessage]="(areTagsLoaded$ | async) === true ? 'No tags found' : 'Loading tags...'"
(onShow)="loadTags()">
<ng-template let-tag pTemplate="item">
<div>{{ tag.name }}</div>
</ng-template>
</p-dropdown>
The code above should be self-explanatory, you need to load your options in the loadTags() or loadWhatever() method and make sure you don't load them again, depending on your needs, by using an extra boolean like areTagsLoaded.
Related
I'm working on a .NET MVC application that has some AngularJS pages in it. I'm trying to use Bootstrap UI Typeahead but it's not quite working properly.
If I start to type in the textbox the autocomplete popup opens with potential matches:
However, if I click on one of the matches nothing happens and the underlying angular model is not updated:
The really strange thing is that if I hit tab while the popup is open the first match will get selected and the angular model is updated appropriately:
This is the template I'm using:
<script type="text/ng-template" id="customTemplate.html">
<div class="search-result search-result--mos ng-scope" ng-if="matches.length > 0">
<ul>
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
</ul>
</div>
This is the relevant front-end code:
<section class="mos intro" data-ng-controller="MosConverterController as vm">
<div>
<form ng-submit="GetCareers()" class="form form--mos">
<div class="form__row">
<div class="form__col form__col--half-plus">
<label for="MOS" class="form__label">MOS/Rate/Duty Title</label>
<input type="text" ng-model="vm.model.SearchTerm" uib-typeahead="career.value for career in vm.model.CareerResults | filter:$viewValue | limitTo:8" typeahead-popup-template-url="customTemplate.html" id="MOS" class="form__input--text" placeholder="Start Typing" name="MOS" required>
<div>Current Search Term: {{vm.model.SearchTerm}}</div>
<textarea>{{vm.model.CareerResults}}</textarea>
</div>
</div>
</form>
</div>
Here's our angular model. Note that we're using Typescript in this project:
import {MosConverterSearchResult} from "../models";
export class MosConverterModel implements Object {
SearchTerm: string = null;
CareerResults: MosConverterSearchResult[];
SelectedCareer: MosConverterSearchResult;
}
I followed the tutorial from the Angular Bootstrap documentation here for the "Custom popup templates for typeahead's dropdown" section but I can't figure out what I'm doing wrong. I'm sure it's something simple but I just can't figure it out. I should note that adding ng-click to the li element like they have in the tutorial doesn't fix the issue. I've tried it like this before:
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match" ng-click="selectMatch($index)">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
After banging my head against my desk for a couple of hours I figured out the issue was the ng-if in my template. The example in the tutorial link I posted above uses ng-show. ng-if destroys the DOM element and destroys its scope in the process. That's why nothing would happen when I clicked on an item from the list. Not sure why the tabbing would work though if this was indeed the case. If anyone knows please add a comment or better answer.
I cannot get the tooltip display translated value (using angular translate) from an object in ng-repeat loop:
<div ng-repeat="type in types">
<div>
<span ng-bind-html="type.icon"></span>
<label style="font-size: 20px;">{{type.nameNormal | translate}}</label>
<i class="fa fa-info-circle"
tooltip-class="custom-tooltip"
uib-tooltip="{{'type.descriptionNormal' | translate}}"
tooltip-placement="bottom"></i>
<hr class="hr-no-background">
</div>
</div>
P.S. UI Bootstrap version: 0.13.4
Angular: 1.4.4
if you are using 0.13.4 of ui bootstrap the directives are not prefixed with the 'uib' prefix yet
see http://angular-ui.github.io/bootstrap/versioned-docs/0.13.4/#/tooltip for details
Ok, for those, who will face equal problem in the future: I just didn't put any value into my translation file for the descriptionNormal.
Example:
type.descriptionNormal = "DESCRIPTION"
Translation file:
"DESCRIPTION": ""
This was the case. Now everything work fine.
So it seams the tooltip doesn't get displayed if the value is empty.
I'm a Newbie to AngularJS trying something with Angular Material and need some ideas / help.
I have icons of Font Awesome which are displayed with ng-repeat:
<ul ng-repeat="item in items">
<i ng-class="{'test': item.active}" class="fa fa-{{item.name}}">{{item.name}}</i>
</ul>
Below I have a list of the icons a with checkboxes:
<span ng-repeat="item in items | filter: item.active = false">
<input type="checkbox" ng-model="item.active"> {{item.name}}<br>
</span>
If a checkbox is activated, the list entry should disappear from the list.
This works with the filter of the property item.active
Now I want to display the activated items above the list with md-chips (Angular Material Chips).
So if a list item is activated, the element should be a md chip above the list (not displayed in the list anymore).
If I click on the 'X' in md-chip, only the state of the property item.active should change again to false.
I have my working files on Plunker, so my current working state can be read:
https://plnkr.co/edit/t3Xpp2AKEJHXBWhkLUYZ?p=preview
Does anybody got an idea how can I implement this?
The easiest way to do that is apply ng-click to your md-chip item and by this click it will set active = false:
...
<md-chips class="custom-chips" ng-model="items | filter: {active:true}" readonly="true">
<md-chip-template>
<span ng-click="$chip.active=false">
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
</md-chips>
...
Here is a plnkr example.
EDIT:
Modified plunker to show only active md-chips.
Hope it will help.
You may want to filter the chips array using the builtin filterFilter function. The watcher that contains the latter will invoke the listener whenever the filterText changes.
...
$scope.array = [
"active directory",
"outlook",
"edrm",
"gcdocs",
"novell",
"iPrint",
"iManager",
"sigma",
"bitlocker",
];
$scope.filterText = "";
$scope.$watch('filterText', function(newValue, oldValue) {
$scope.filteredArray = filterFilter($scope.array, $scope.filterText);
}, false);
...
The following markup will render and filter the chipset.
<md-content flex class="md-padding">
<label>Filter: <input ng-model="searchText"></label>
<md-chips ng-model="filteredArray" readonly="ctrl.readonly"
md-removable="removable" placeholder="Enter an issue...">
<md-chip-template>
<strong>{{$chip}}</strong>
</md-chip-template>
</md-chips>
</md-content>
For further information on filters please see https://docs.angularjs.org/guide/filter
For further information on $watch please see https://docs.angularjs.org/api/ng/type/$rootScope.Scope
I need to create custom styling for a select dropdown (including the options). The more I've dug into this, the more I've realized that styling options is quite difficult.
I'm currently using Bootstrap's dropdown and it works great, except for the fact that I have to use a function to assign a value.
This is how I am currently using a 'custom select dropdown':
<div class="form-element-container">
<div class="drop-down dropdown-toggle">
<label for="chooseAdvisor"></label>
<div>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{{mySelection}}</button>
<ul class="dropdown-menu">
<li ng-repeat="option in options">{{option}}</li>
</ul>
</div>
</div>
</div>
You can see that on click, I have to manually set the option in my controller rather than it being directly bound to my model. Is there any way that I can use Bootstrap's dropdown styling with angular's select tag?
I would love to be able to use my options repeater with 'track by', etc:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can try it:
https://angular-ui.github.io/bootstrap/#/dropdown
Just a suggestion, I've not tested it yet.
Update answer:
I think you can instead of angular module : acute-select
https://github.com/john-oc/acute-select
Demo : http://john-oc.github.io/
I have an accordion from angular-ui bootstrap. In the header of each accordion i have a checkbox that should enable/disable the ability to open the accordion.
Heres the code
<div ng-repeat="b in board | filter:searchText track by b.Id">
<accordion-group class="animation-appear" ng-disabled="b.selected">
<accordion-heading>
<h4>
{{b.Name}} <small>- set list aliases</small>
<input type="checkbox" ng-checked="b.selected" ng-model="b.selected" ng-click="checkboxClick(b, $event)" style="float:right" />
</h4>
</accordion-heading>
....
....
....
</accordion-group>
Everything seems to work fine, except the ability to disable an accordion. The accordions work, the checkboxes in the accordions work, the model from $scope.board.selected is updated, but still the ng-disabled doesnt disable the accordion
Any help is greatly appreciated!
This is not supported in the latest released version (0.10.0) but the new release (coming this weekend!) has a support for the is-disabled property. See https://github.com/angular-ui/bootstrap/commit/9c43ae7c0a66ff454c97296122d8f82c89ac4d5e
You can build content of the https://github.com/angular-ui/bootstrap repo if you need this support now.