I have a CompositeView, Collection and ItemView working fine. It's actually fetching my results and it's awesome. My problem, I've to build a list (using <li>) but splitting every 3 items.
The render output should be like this:
<div id="feed">
<ul class="feed">
<li><img src="assets/img/1.jpg"></li>
<li><img src="assets/img/2.jpg"></li>
<li><img src="assets/img/3.jpg"></li>
</ul>
<ul class="feed">
<li><img src="assets/img/4.jpg"></li>
<li><img src="assets/img/5.jpg"></li>
<li><img src="assets/img/6.jpg"></li>
</ul>
</div>
I've successfully rendered a <ul> containing all the list elements but... how I can make something like the above output? I don't really know how to start.
Thanks in advance!
You can change the way your CollectionView/CompositeView renders items by overriding the appendHtml method. You will want to do something like this:
appendHtml : function (collectionView, itemView, index) {
if (! index % 3) {
this.$("#id").append("<ul class='feed'/>");
}
this.$("#id ul:last").append(itemView.el);
}
Related
I have a array like this:
$scope.sortable = [["inProgressCounter","31"],["approvedCounter","3"],["pendingCounter","35"],["rejectedCounter","0"]]
I need to show them with ng-repeat my code is:
<ul>
<li ng-repeat="info in sortable">{{info[0]}}{{info[1]}}</li>
</ul>
but it gives me nothing.
so I also tried print the data out in html like this:
{{sortable}}
<ul>
<li ng-repeat="info in sortable">{{info[0]}}{{info[1]}}</li>
</ul>
it works,and shows me the data.
Here is a plunker of this working. This was all using the code you provided.
There must be something wrong with your controller, or you arent even assigning a controller to anything.
code
http://plnkr.co/edit/4pEsP6mr0tA6Toe9coTG?p=preview
I've got one question . Is there anybody how has idea how to invoke function in controller only for the first li object in ul when ul has a ng-repeat?
Lets say ive got function in my controller like:
var init = function () {
var a = this;
};
And my ul repeater seams like lets say:
<ul ng-repeat="up in userpartners" ng-click="setSelected(this);">
<li>
{{up.id}}
</li>
</ul>
And I want to invoke init function with parameter 'this' which will be first 'li' item. Only for the first li i want to set something.
You can do it like this:
<ul ng-repeat="up in userpartners" ng-init="init(up, $first);">
<li>
{{up}}
</li>
</ul>
And in the controller:
$scope.init = function (item, isFirst) {
if (isFirst) {
alert(item);
}
};
Fiddle Example
See here check if $index is zero or $first is true.
But there's already a single LI inside your UL.
I believe you mean:
<ul>
<li ng-repeat="up in userpartners" ng-init="$first && setSelected(up)">
{{up.id}}
</li>
</ul>
or
<ul ng-init="setSelected(userpartners[0])">
<li ng-repeat="up in userpartners">
{{up.id}}
</li>
</ul>
See the difference? We want to repeat the children, not the whole list.
Although I believe it wouldn't be a good practice to have this call on a view. I'd put it inside a controller, the call itself.
I am trying to work out ng repeat animation when I add/remove items from two different arrays one after another but it doesn't seem to work really smoothly on chrome-it works on firefox. Here is the following example codes:
template.html
<ul>
<li ng-repeat='item1 in arr1' class="repeated-item">
<span>{{ item1 }}</span>
</li>
</ul>
index.html
<div>
<div ng-include='template.html'></div>
<ul>
<li ng-repeat='item2 in arr2' class="repeated-item">
<span>{{ item2 }}</span>
</ul>
</div>
I notice animation works quite well for outside repeat except ng-included template. Hope you guys can help to figure out this.
You didn't close the <div ng-include='template.html'> tag properly. Add the closing tag </div>.
Given a list such as
var list = ['one','two','three'];
In angular, I want to iterate through the list only rendering certain items. Something like:
<ul ng-controller="main">
<li ng-repeat="item in list" ng-switch on="item">
<span ng-switch-when="one">{{item}}</span>
</li>
</ul>
And have the output look like this:
<ul>
<li><span>one</span></li>
</ul>
Instead, I get:
<ul>
<li><span>one</span></li>
<li></li>
<li></li>
</ul>
I have tried ng-hide but is woefully inefficient since I have a large number of items and only want to display one or two and ng-hide renders all of them and then hides the inactive ones with css. This is a problem because I am doing this in a JQuery Mobile app which tries to decorate all list items, including the hidden ones, killing performance.
JSFiddle at http://jsfiddle.net/ghendricks/MXu3a/
You are correct that ng-hide should not be used here, it is a job for filters.
You can provide a custom function to filter the list: http://jsfiddle.net/ERMVj/
$scope.selectOne = function (input) { return input == "two" || input == "one"; };
<li ng-repeat="l in list | filter:selectOne">
<span>{{l}}</span>
</li>
I have this CSS selector, which just won't bind .live(), but works perfectly with .bind():
$('.treeView li ~ :has("ul")').prev('li')
I've read somewhere, that using the .prev() and .next() could be troublesome coupled with .live(), so I wanted to create an pure CSS selector (or ANYTHING that works with .live()!) to do the job - but I just can't figure it out!
Here's what I want to do:
Select all li-elements, which is followed by an li containing an ul.
Here's an HTML markup example, I want to select the ones where the comment says "selected"
<div class="treeView" id="processSegmentsTree">
<ul>
<li>Ostetanke</li> //selected
<li>
<ul>
<li>Tank 1</li>
<li>Tank 2</li>
</ul>
</li>
<li>Presse</li> //selected
<li>
<ul>
<li>Sub-leaf 1</li>
<li>Sub-leaf 2</li> //selected
<li>
<ul>
<li>test</li>
<li>test</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Any help is much appreciated, since this is a bit of a thorn in my eye :(
There is no such Selector to accomplish this task.
What I highly recommend you to do is to add ANYTHING as a flag to use when selecting your desired elements.
add attribute, wrapper, ANYTHING YOU WANT, then the task will be as easy as it should be.
This may work: // not css selector
$(".treeView li:has('ul')").prev();