I am Using angular-deckgrid to create pinterest like view
Here is the Code I have written
<div deckgrid source="items" class="deckgrid">
<span data-ng-repeat='i in card'>{{ i }}</span>
</div>
I am expecting the value of i in the ng-repeat, but that seems to be not going in the loop.
Can any one please suggest me the solution
The data-ng-repeat is redundant. Be default, deckgrid will loop over your items variable and assumes it is an array.
Make sure items is an array and remove the data-ng-repeat.
Related
HTML:
{{vm.regions}}
<div ng-repeat="region in vm.regions">
{{region}}
</div>
On button presses, the model a.k.a vm.regions gets updated in the controller. For example vm.regions = [].
I can see that the array {{vm.regions}} is instantly updated, but the elements in the div take at least a second to update, meaning you can see old elements for a bit in the newly updated list, for example.
What is causing this?
It is in AngularJs Best Practices to always add "track by $index" in order to inprove performances.
{{vm.regions}}
<div ng-repeat="region in vm.regions track by $index">
{{region}}
</div>
Link : https://docs.angularjs.org/api/ng/directive/ngRepeat
Try using vs-repeat. It applies virtual scrolling to ng-repeat which increases its performance drastically even if you are not using one time binding.
http://kamilkp.github.io/angular-vs-repeat/#?tab=8
I'm trying to go with the best approach and avoid unnecessary rendering/processing time in my AngularJS app when choosing between 2 directives to be displayed in the page inside an ngRepeat loop, want to know which is the best way:
If by setting the ng-if directly in the directive html element, like:
<div ng-repeat="element in list">
<my-directive-a ng-if="someFunction(element)"></my-directive-a>
<my-directive-b ng-if="!someFunction(element)"></my-directive-b>
</div>
Or by moving out the first <div> from the directive's template and use it as a wrapper for each directive. For instance:
<div ng-repeat="element in list">
<div ng-if="someFunction(element)">
<my-directive-a></my-directive-a>
</div>
<div ng-if="!someFunction(element)">
<my-directive-b></my-directive-b>
</div>
</div>
NOTE: The starting <div> element on each directive could be modified behave the same so I will basically take that out of the directive's html and moving it outside the directive declaration in order to place the ng-if there
What would be the best approach for this case? Are there any performance implications from doing it one way or another? Or is it just the same thing? Consider that the number of elements in the list could get really big.
They are quite the same, but you can improve performance with one-time binding, but only when element does not change at runtime (for example, let's say that it has property name, and your someFunction is like return element.name === 'John'). Angular just stop observing this function when it returns value, and watches will be deleted. There are 2 prerequisites to use this solution:
Elements properties in list does not change (if you rely on them in someFunction), for example if you rely on name property name must not change, because watcher on someFunction is note available.
When list changes or its elements properties change, you reload all list (for example, you fetch it from server again if you know that change occurred)
What you get with this? There is no watches after my-directives are drawn on ng-ifs, and when something changes, new reference is bound to list (for example, it comes from server) and everything will be redrawn, ng-ifs will run again and when will become stable (function returns value) then will be unbound. How it looks like? Like this:
<div ng-repeat="element in list">
<div ng-if="::(someFunction(element))">
<my-directive-a></my-directive-a>
</div>
<div ng-if="::(!someFunction(element))">
<my-directive-b></my-directive-b>
</div>
</div>
Two colons before expression. But be aware, that with one-time binding it's easy to mess up - you need to be sure that you test your code enough to be sure it works.
I am running this simple code with angularjs :
HTML :
<div ng-app ng-controller="AController">
<code>{{ itemsInArray }}</code>
<div ng-repeat="item in itemsInArray">
<input ng-model="itemsInArray[$index]" />
</div>
</div>
JavaScript :
function AController($scope) {
$scope.itemsInArray = ["strA", "strB", "strC"];
}
Binding appears to be working correctly when indexing into the array but after entering one character the input loses focus.
You can find the working code here on this fiddle : http://jsfiddle.net/QygW8/
I think this is happening because you are manipulating the same item which is iterated over ng-repeat. So ng-repeat sees a change in the item and re-runs the `ng-repeat which regenerates the items.
If you look at your fiddle html, you may notice this effect.
To make it work, one way you can do this
http://jsfiddle.net/cmyworld/CvLBS/
where you change your array to object array
$scope.itemsInArray = [{data:"strA"}, {data:"strB"}, {data:"strC"}];
and then bind to item.data
Try to change the model:
<div ng-repeat="item in itemsInArray">
<input ng-model="item" />
</div>
Even am an newbie to the angularjs, up-to my findings ng-repeat updates/repeats and recreates the whole HTML elements when there is an change in the model. Hence when a single character added to model causes ng-repeat to react and creates the all the HTML elements again which results to losing the focus.
This is an fiddle , In which u will be able to observer the changes with the model inside the ng-repeat and outside the ng-repeat.
Sorry i don't have the solution, Hope using ng-change apart of ng-model may help.
I'm trying to print out the error messages using the code below. As you can see, since the message is inside an associative array (object) 3 levels deep I have to use 3 loops. The outer divs are actually pretty useless and I want to get rid of the if possible. However, since ng-repeat requires putting it to a real div, I don't know what else I can do?
<div data-ng-repeat="(typeKey, typeValue) in alerts">
<div data-ng-repeat="(fieldKey, fieldValue) in typeValue">
<div data-ng-repeat="(messageKey, messageValue) in fieldValue">
{[ messageValue ]}
</div>
</div>
</div>
As I know angulajs does not support containerless syntax. If you want to get rid of divs than you can write a function on controller to generate your message values without divs:
<div>
getMessages(alerts)
</div>
I'm using Foundations with AngularJS. I have a case where I'm trying to display things in columns using ng-repeat.
<div class="four columns" ng-repeat="resultsObject in resultsObject">
<div ng-bind-html-unsafe="resultsObject"></div>
</div>
This works fine. But the issue is that the columns size could be anywhere from 1-5. And I'd like the display to update dynamically. So if there are only 2 columns, it would adjust to the correctly column display.
<div class="{{$rootScope.columnCount}} columns" ng-repeat="resultsObject in resultsObject">
<div ng-bind-html-unsafe="resultsObject"></div>
</div>
When I try doing something like the above code, {{$rootScope.columnCount}} doesn't display anything. (I have verified that it does accurately store the correct column based on input.) It shows up in the source as <div class=" columns"> instead of <div class="3 columns">.
Is this an issue with using an angular variable and ng-repeat in the attribute? I've used {{$index}} within the class - so I know it can print things out within the class attribute.
Without seeing some code, I would assume the number of columns is equal to resultsObject.length so can you try:
<div class="{{resultsObject.length}} columns" ...
Here is a short demo.. Check out the class of each li and you'll see the count.
http://plnkr.co/edit/fFRTjD5gse8tnJmDig2I?p=preview
Lastly can you just try to bind to class="{{columnCount}} columns">... I don't think you need to reference the $rootScope.
The problem was an issue with variables overlapping. Apparently I had used columncount in other places in my app. So it just kept getting set back to an null. Simply changing the name solved the problem.