I use Angularjs on page for displaying numbers of notes:
<span ng-hide="currentCount.messages <= 0">{{currentCount.messages}}</span>
The value currentCount.messages is got from response AJAX in controller.
Problem is that when I do reflesh browser page I see text {{currentCount.messages}} temporarily.
I tried to define in top controller: $scope.currentCount.messages = 0; but it did not help me.
Try this:
<span ng-hide="currentCount.messages <= 0" ng-bind="currentCount.messages"></span>
Using ng-bind accomplishes the same thing, but you won't see the template string in the page before the angular finishes rendering.
Related
I am using the sliders in the ionic framework and everything is working great. This is my html:
<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager={{showPager}}>
Pretty straightforward, notice that i am using showPager to dynamically show and hide the pager.
And in the controller:
$scope.showPager = true
$scope.slideHasChanged = ($index) ->
if $index == 4
$scope.$apply ->
$scope.showPager = false
It does as expected sets showPager value to false when the index of the slide is 4 in the web console.
BUT it does not really hide it on the web page. IF i explicitly set showPager to false, it does not display in the browser as expected, but if i try the above stuff to dynamically hide it, it does not work.
What am i missing?
<ion-slide-box> directive does not observe show-pager attribute. So it will consider only the value which was at the time of directive initialization.
For your use-case, you can show/hide pager by putting ng-class directive on <ion-slide-box> directive and based on that class you can write css to show/hide the pager.
Check this example codepen for working example.
I am using the pagination directive from the ui-bootstrap (angular-bootstrap) library. I am having an issue when it initializes. My issue occurs when I navigate to a specific page via url.
What is happening is that my controller initializes with the correct page from $stateParams, then the pagination directive initializes and triggers the ng-change function which is resetting the page to 1. Now that on-select-page is no longer used, is there a way to only capture user clicks to change the page? Ideally I would like the directive to initialize before the controller so that my page does not get reset. Thank you in advance.
I can include code if needed, but I feel my question does not necessarily require a code block.
So I found a solution after drilling down into the angular-bootstrap code. Their code has a watch on totalPages that checks if the current page is greater than the totalPages value.
angular-bootstrap code:
if ( $scope.page > value ) {
$scope.selectPage(value);
} else {
ngModelCtrl.$render();
}
What was happening was if I refreshed the page on page 3 (for example) my controller was reloading the items for that page temporarily causing total-items to be 0 and totalPages to be calculated as 1. This triggered the watch and the above code.
My solution was to load the items in the state resolve so that total-items (and in turn totalPages) would always be accurate.
If you don't want to use state resolve the data then you could just add a ng-if directive on paginator. Assuming $scope.total_count is used to bind to total-items attribute, you can do something like the following:
<pagination data-ng-if="total_count"
total-items="total_count"
ng-model="applied_filters.page"
max-size="maxSize"
class="pagination-sm"
boundary-links="true"
rotate="false"
class="nomargin"
num-pages="numPages"></pagination>
This way the directive is always initialized when you have total count from the server & currentPage will not be greater than totalPages
The ng-if directive didn't work for me as expected (I didn't use the controllerAs syntax): the pagination wasn't able to update the $scope.currentPage variable anymore. The solution was to use ng-model="$parent.currentPage" instead of ng-model="currentPage".
<uib-pagination ng-if="totalItems"
total-items="totalItems"
items-per-page="itemsPerPage"
ng-model="$parent.currentPage">
</uib-pagination>
A solution to this problem I've found from Github and implemented and worked perfectly.
As mentioned in other answers also, the issue is with totalItems and when I try to move to page 2/3/n, totalItems becomes 0 for a moment and in the process, currentPage value becomes 1 and I can't move to my desired page. So my trick is, before I call the data from server, I just set a bigger number as totalItems and after I receive data from server, I update totalItems.
$scope.totalItems = 1000;
QuotationService.getQuotations(url).then(function ( response ) {
$scope.totalItems = response.data.total;
$scope.quotations = response.data.data;
$scope.isTableLoading = false;
});
In my view, only if isTableLoading is false, I show the Pagination, otherwise pagination will show a wrong number of pages.
<div class="text-center" ng-show="isTableLoading == false">
<uib-pagination boundary-links="true"
total-items="totalItems"
items-per-page="15" max-size="15" ng-model="currentPage"
class="pagination-sm" previous-text="‹"
next-text="›" first-text="«" last-text="»">
</uib-pagination>
</div>
Now everything working perfectly.
If you are looking to set the page when the page loads, then just load up the model as it describes here.
From the website:
<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()">
</pagination>
I'm sure you've already looked there, so if the model is not being set properly upon the initialization of the controller then you're obviously going to have problems. There is also the case where it is possibly being overwritten in another place where you are using $scope.currentPage. Although you may feel it is easier without code, I would suggest posting the HTML and Angular Controller you are referring to. Hope it helps!
An alternative to the state resolve would be to set the total-items in a value module once known. Same dealio, actually I just wanted to comment on your above answer, but I didn't have the points necessary. Thanks for the explanation, helped me out!
Just adding another simplest way to fix the problem.
1. First, pass query params to your URL(to make more sense about at which page you are currently at). To do this, add this line of code to your function that runs on (pageChange). i.e (pageChange)="getAllData(page)"
this.router.navigate(['/Advertisement'], { queryParams: { page: page }});
2. Second, get query params and assign the params to page variable. i.e
this.route.queryParamMap.subscribe((params:any) => { this.page = +params.get('page')});
My HTML
<ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" (pageChange)="getAdvertisements(page)">
Anyone managed to integrated supersize with angular js?
I tried creating a directive and placing the following code inside a directive
$.supersized({
//params :
supersize did work in creating the
<ul id=supersized" .... >
However my screen isn't displaying supersize's full screen slideshow. Any idea why?
Is there a way to prevent flicker for templates that contain concatenated values such as {{person.LastName+ ", " + person.FirstName}}?
I don't want to see the "," until $scope.person is bound.
Is this something that I might put into a filter? Would you create a filter for something this trivial?
You can use the ngCloak directive for that. From the docs:
The ngCloak directive is used to prevent the Angular html template
from being briefly displayed by the browser in its raw (uncompiled)
form while your application is loading. Use this directive to avoid
the undesirable flicker effect caused by the html template display.
You can simply use ng-show for this.
I've created a demo to show the results.
http://plnkr.co/edit/ZAC8RzagPYmLHgXcPazW?p=preview
I'm using a timeout of 2 seconds in the controller so you can see the flicker if you remove ng-show.
You can use "ng-bind" attribute in your wrapper tag so instead of this:
<span>{{person.LastName+ ", " + person.FirstName}}</span>
You can do this:
<span ng-bind="person.LastName + ', ' + person.FirstName"></span>
This will change the tag text only when the value is properly concatenated.
Had some issues with ng-cloak so i resorted to using plain old css:
<div class="digits" style="display:none;">
And on the controller:
document.querySelector('.digits').style.display = 'block';
This happens because you're loading your angular js lib not from the <head></head> section. If it's not a big deal to you, just move your angular <script> tag in the head and it should stop flickering.
I have been working with routing and I have seen how I can update the ng-view using routing and a view template.. But the problem I have is that I am doing a REST call and depending what I get back from the response I wish to update part of the DOM with a view template but I don't want to involve routing.
Does anyone know how I can do this? Or any examples would be great
Thanks in advance
Another answer. Based on your description in the comment, it sounds like you wish to display part of the DOM conditionally.
When you want to display part of the DOM conditionally, you have the following choices:
Use an ng-show and ng-hide directive.
Based on what returns from the RESTful call, you can set up a model that will identify the DOM that needs to be displayed. An example:
<div ng-show="status">
This text will be shown only when the status is truthy
</div>
<div ng-hide="status">
This text will be shown only when the status is false.
</div>
Inside your controller, you could then set the status to true or false based on your RESTful calls and based on which part of the DOM you wish to display post RESTful call.
You can use ng-switch directive
While the ng-show and ng-hide directives will display the content of your DOM conditionally, that is anybody could simply open the source file and see the contents for both, ng-switch directive will load the contents only based on which case fulfills the swtich. An example:
<div ng-switch on="status">
<div ng-switch-when="true">
This text will be shown only when the status is truthy.
Else this is completely hidden and cannot be seen even
when looking at the source.
</div>
<div ng-switch-when="false">
This text will be shown only when the status is false.
Else this is completely hidden and cannot be seen even
when looking at the source.
</div>
</div>
The first child div is shown when the status is true else it is not shown at all. The advantage over ng-show or ng-hide is that the DOM will not contain the child elements if the case is not fulfilled.
$location.path() can be used here.
So, in your Parent Controller, you can make the REST call. Once you have the data with you, you can then decide which route to take. The route value goes into the path() function.
As an example, let us say that if your REST call returns with cherries, you need to take the /foo path (which, based on your $routeProvider will load the template associated with that route). You can then write the following:
$location.path('/foo');
and it will loads the /foo path - $routeProvider will then take care of loading the template associated with that path.
Reference: $location