This plnkr I created shows the problem: http://plnkr.co/edit/YQAUCg5vjcgS1BEGB4nY?p=preview
shortly, I've got many pages and i set this attribute: force-ellipses = true to show the dots instead 200 pages. But doesn't work. I use angular bootstrap 2.3.1 and I think this is the problem. But I can't use another version so, is there any way to fix it?
<pagination
num-pages="noOfPages"
current-page="currentPage"
max-size="maxSize"
boundary-link-numbers="true"
rotate="true"
force-ellipses="true">
</pagination>
Actually, implementation of uib-pagination is not correct. In the recent version, the syntax is
<div uib-pagination total-items="total_items" max-size="maxSize" class="pagination-sm" boundary-link-numbers="true" rotate="false"></div>
Check this plunker for implementation
Apart from this. I use dir-pagination i feel that more convenient and easy.
Check this angularUtils repo
and Plunker for dir-pagination
Related
Because of this thread, I need to use a high version of ui-bootstrap-tpls.js. However, I realise that this disabled bootstrap pagination, which works with a lower version of ui-bootstrap-tpls.js.
For example, this pagination works with https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js, whereas https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js does not work.
Does anyone know what I could do?
Try this plunk with:
<ul uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="pageChanged()"></ul>
instead of:
<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
So far I've read https://angular.io/docs/ts/latest/guide/router.html#!#router-link and https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/
but they're a bit too dense for my level and I'm getting lost easily.
So I thought about asking if there is a simpler way of doing what I want, or if there's another way of looking at the problem.
Currently I have "half" a webpage built
http://plnkr.co/edit/BcyPlw?p=preview
, in angular2, in which I use js and ts functions to get some D3 and some maps working:
<div layout="row" layout-wrap flex>
<div flex="50" *ngFor="#item of items">
<md-checkbox [checked]="exists(item, selected)" (click)="toggle(item, selected)">
{{ item }} <span *ngIf="exists(item, selected)">selected</span>
</md-checkbox>
</div>
</div>
The idea now is to add URIs to events such as: if you click calendar, trigger an event so that I can return which cars were used in a given date, or which sessions does a car have in a given date, since I have created a webservice in java that is waiting to get something like:
#GET
#Path("/getData/{car}/{session}")
So the uri I am working with in the webservice (which I tested and works, and I want to connect with what I have in angular2 via tomcat) would be something like:
http://localhost:8080/Project/rest/projectName/getData/55/99
So I believe that is done with routing but 1º I haven't found examples that go deeper than /path (so, not /path/getData/data/data , in this case) , and 2º I am not really getting how to use what can be seen in the official tutorial { path: 'hero/:id', component: HeroDetailComponent }];
It is quite confusing and as of right now I do not feel I have the level to do all those steps (and there are many that I don't need, either), it all seems too complex
I am trying to populate data into the html page using Angular framework.
I want to add data to existing accordion element
<div ng-controller="Ctrl">
<accordion id='accordion' close-others="false">
<accordion-group is-open="false">
<accordion-heading >
<h2>{{heading}}</h2>
</accordion-heading>
<div>
<div>
{{data}}
</div>
</div>
</accordion-group>
</accordion>
<accordion>
....more
</accordion>
multiple accordions here...
</div>
I am not sure how to add more accordion dynamically. Can anyone help me about it? Thanks a lot!
There is a lot of trick you can do, like using ng-show or ng-hide for example, and have all the accordion all ready write on the page, or a ng-repaet with various accordion inside, but take care of the space in the page.
If i Have understand your problem you can set a variable in that way var data={value:'something',show:'true'} and bind the ng-show parameter to the data show, at least you can do an array of data with the show value, there is an infinite type of solution.
With a plunker or a fiddle it could be easier to help, but i hope my answer could help you anyway.
We are attempting to upgrade from AngularJS 1.0.7 to 1.2.1. In 1.0.7, we were able to set the controller for an ng-include alongside in the same element, like so
<div data-ng-include="'include1.html'" data-ng-controller="MyCtrl1"
MyCtrl1 would become available to the code inside include1.html.
This breaks when moving to AngularJS 1.2.1 which I have illustrated in this plunkr. If you change the referenced version to 1.0.7 it works again.
I am interested in understanding what has changed/why this is. I tried searching but couldn't find anything or I am not using the right terms.
Additionally, what would be the correct way to specify a controller for my ng-includes?
Why not move the ng-controller from the element having ng-include to inside the template:
index.html:
<div data-ng-include="'include1.html'"></div>
<div data-ng-include="'include2.html'"></div>
include1.html
<div data-ng-controller="MyCtrl1">
<h1>{{Username}}</h1>
</div>
include2.html
<div data-ng-controller="MyCtrl2">
<h1>{{Username}}</h1>
</div>
It seems ngController and ngInclude cannot be used in conjunction with each other since Angular version 1.2:
Issue 1, Issue 2, Issue 3 and SO post.
I'm using AngularJS with a third party service that generates html responses. I want to use ng-repeat to render the HTML responses as a list, however Angular renders it as text.
Is it possible to use ng-repeat to render HTML property?
I've created this jsFiddle to demonstrate my issue.
http://jsfiddle.net/DrtNc/1/
I think using ng-bind-html-unsafe will get you what you need.
<div ng:repeat="item in items" ng-bind-html-unsafe="item.html"></div>
Here's a working fiddle: http://jsfiddle.net/nfreitas/aHfAp/
Documentation for the directive can be found here: http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe
The way I achieved this is by ng-bind-html inside the ng-repeat;
<div ng-repeat="comment in comments">
<div ng-bind-html="comment.content"></div>
</div>
Hope this helps someone!
item.html will always be interpreted as text. you have to convert it to html explicitly. click here
I have added a render function which will convert each string to html.