I am working on an Angular & Bootstrap application. Please suggest me best pagination plugin that i can use.
I have tried like this:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
but it uses own directive eg. dir-paginate instead of ng-repeat
E.g. <li dir-paginate="item in list.collection | itemsPerPage: 3" pagination-id="list.id">ID: {{ list.id }}, item: {{ item }}</li>
I would suggest you to go with : angular-ui Bootstrap Pagination
The Library is maintained by the core team and it is very stable. Also since you are already using bootstrap so, it will be ideal for you.
Related
I have the HTML below and I am trying to get the Image tag in the field item.Image to render. Does any Angular gurus know why the below doesn't work?
<li ng-repeat="item in results.results" >
<div ng-bind-html-unsafe="item.Image"></div> <!-- item.Image is <a href="image/test.png"/> -->
This may be due to which version of angular you are using.
ngBindHtmlUnsafe was replaced with ngBindHtml in 1.2
https://docs.angularjs.org/guide/migration#ngbindhtmlunsafe-has-been-removed-and-replaced-by-ngbindhtml
Here is a working example with 1.07 using ngBindHtmlUnsafe
And here is a working example with 1.2 using ngBindHtml(Note that ng-sanitize needs to be passed in as a dependency)
Is there a native dragdrop solution for AngularJS, that can handle drag an dropping between nested ng-repeats?
What the current html looks like:
<section ng-repeat="list in lists">
{{ list.name }}
<article ng-repeat="user in list.users">
{{ user.name }}
</article>
</section>
What I'm trying to achieve is that I can move users to other lists.
I don't wanna have to add jQuery UI as a dependency for just dragdropping.
I had the same problem and wanted to use native HTML5, too. Since I couldn't find anything I eventually had to build my own library, check out the results:
http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/nested
There is no native drag and drop in Angular, but look this awesome directive
http://codef0rmer.github.io/angular-dragdrop/#/
Check the examples, i hope thouse will helps you
Angular-NestedSortable is really usefull for this case.
I recently upgraded from angularjs 1.0.8 to 1.2.3 and it has been a nightmare. So many things have broken, some of which I have been able to figure out. There is a problem with ng-repeat that I have been unable to fix. When using 1.0.8 the following code worked as expected:
<ul id="my_list">
<li ng-click="doSomething('{{item.item_id}}')" ng-repeat="item in items">
<span>This is item {{item.item_id}}</span>
</li>
</ul>
However, now that I have upgraded to 1.2.3 each <li> will display the item_id in the <span> (i.e., "This is item 1", "This is item 2", etc.), but the function still just displays doSomething('{{item.item_id}}') as opposed to, for example, doSomething('1'). Why is {{item.item_id}} binding in one place, but not the other?
ng-click takes a JS expression, so <li ng-click="doSomething(item.item_id)" ng-repeat="item in items"> should work.
ngClick doesn't interpolate the expression. Use doSomething(item.item_id) instead.
As Jeff and ceejayoz point out ng-click expects an Angular expression, so you can access scope properties without binding to them.
Use this if you need the parameter as a string:
ng-click="doSomething(item.item_id.toString())"
For adding the value in the DOM you need the curly braces, which tell Angular to expect an expression like ng-click does.
I figured it out. It was because I wrote the function with a semicolon as the end: doSomething('{{item.item_id}}');. I found that onclick="doSomething('{{item.item_id}}')" doesn't work, but ng-click="doSomething('{{item.item_id}}')" does work.
As a side note: I have been working with angularjs for about 5 months now, and I have to say that it has led to an increase in the complexity of my apps and it is much more complicated that just using jquery. I know many people will disagree, but it just seems like it is MUCH more trouble than its worth. I kind of regret using it.
When I call a rest service then i will get .html file from server. But it showing scripts for 1 or 2 seconds. Then it shows correct values.My problem is page loads first then controller binds data. Is there is any way to bind data before loading page?
There are basically two options that I know of:
The preferred option is to add ng-cloak to sections of the page that contain angular templates. From the docs:
<div id="template1" ng-cloak>{{ 'hello' }}</div>
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
Use ng-bind instead of the {{ }} approach. For example:
<div ng-bind="marked4Reviewcount"></div>
Have a look at the ngCloak directive. It temporarily hides the Angular template while the page is being loaded. You could apply it on the body tag, but it's advised to do it on portions of the page so you get a progressive loading effect.
http://docs.angularjs.org/api/ng.directive:ngCloak
How do I get auto-complete for angularjs syntax in strings. For example:
myscript.js
var List = function ($scope) {
$scope.names = [
"Ahmed",
"Tom",
"David",
"Jessie"
];
};
HTML
<div>
<label for="get_name">
Find your name:
<input type="search" name="search" id="search" ng-model="search"/>
</label>
</div>
<div ng-controller="List">
<ul>
<li ng-repeat="name in names | filter:search">{{ name }}</li>
</ul>
</div>
<script type="text/javascript" src="angular_1.0.7.js"></script>
<script type="text/javascript" src="myscript.js"></script>
This is basically a way to search to names. How do I get auto-complete to appear inside <li ng-repeat="name in names | filter:search">{{ name }}</li> inside ng-repeat.
I am using PHPStorm 6.0.3.
You can use awesome AngularJS plugin from John Lindquist.
http://plugins.jetbrains.com/plugin/6971
I've finally got it to work by following this tutorial from JetBrains' blog.
Short answer:
You have two options to enable AngularJS autocomplete:
Download angular source code and put the file into a folder inside your project. (it wasn't working form me because I was using it direct from a CDN).
If using a CDN, you must go to Project Settings | JavaScript | Libraries | Download, then select TypeScript community stub from the select box on top left, find angularjs and angular-ui on the list, then Download and install.
Restart IDE. Be happy.
In my case installing angular library didn't work. It was the angular plugin that did the trick. According to this video, install the angular plugin and restart your IDE.
For latest versions, you go to
File -> Settings -> Plugins -> Install JetBrains Plugin -> Search for the plugin, select and install.
Finally, restart your IDE. You can test it by creating a div and typing ng- and you'll see all the suggestions.
Hope this helps.
If you don't already have angular set up, go to Preferences > Project Settings > Javascript > Libraries and add your version of angular.
As for autocomplete in html strings, I don't think that's going to happen with the current version of PHPStorm, but in most other places, it should do the trick.