I am trying to make a nice display of my array data within an element that has a certain width/height. What I want to do is that when my data reaches the bottom of the element to start a new column and continue with printing the data within that next column and so on/forth
Any help is much appreciated!
My code:
<div class="repeater" ng-repeat="files in files"> {{files.name}}
<div class='progress-bar'>
<div class='percentage' ng-style="style">
</div>
</div>
</div>
Current view:
HTML/CSS solution
This should be better solved by CSS than by your application logic. You could display the file names as list and adapt the approach at
How to display an unordered list in two columns?
to display them in multiple columns.
Related
I have a request that I'm scratching my head over, and I'm hoping someone can help me out. The client is looking for a sidebar widget that would display related items of a product. To conserve on vertical space, I have made this area collapsable using a Bootstrap accordion.
After reviewing what I developed, they like the idea but they wish to take it a step farther. The client would like the first three related items always displayed in this related items area, BUT if the items exceed 3, then add the collapsible element below with a toggle button (SHOW MORE). Problem is, I'm stuck on how the logic would play out in JSTL.
JSTL:
<ul>
<c:set var="count" value="0" scope="page" />
<c:forEach var="itemID" items="${sellableGood.relatediItem}">
<c:set var="count" value="${count + 1}" scope="page" />
<script>console.log(${count});</script>
<li>
${itemID}
</li>
</c:forEach>
</ul>
Here's what I have currently, it's a basic forEach loop that just iterates through all of the related items. I'm puzzled on how I would use the COUNT variable to know when there was more than 3, then put those in a div within this unordered list. Or is there a way to get the total count before I start outputting the unordered list in the first place?
Thank you in advance.
The following snippet should help to check if count is greater than 3
<c:if test="${count > 3}">
your logic
</c:if>
I'm trying to get UI sortable with connected lists to play nice. Basically, I want to keep the functionality of two connected lists but I'd like the list on the right side to have two sections:
"First Place" only holds the very first tab and "Everything Else" holds the rest of the tabs. Basically, I want to just add two labels in there to separate things visually.
The user should be able to sort things vertically as if the labels weren't there and move tabs between the two lists.
This pen should demonstrate what I'm trying to do.
You'll notice that I can't really insert markup into
<div class="app" ng-repeat="app in list2">{{$index}} {{app.title}}</div>
as I only want the labels to appear one time...
Any ideas?
Using $first and $index:
<div ui-sortable="sortableOptions" class="apps-container screen floatleft" ng-model="list2">
<div ng-repeat="app in list2">
<div ng-if="$first">First Place</div>
<div ng-if="$index == 1">Everything Else</div>
<div class="app">{{$index}} {{app.title}}</div>
</div>
</div>
I'm new to masonry with angular. i have tried to get masonry working with angular up to a certain extend and im facing few issues with it right now. Below given link is what i have done so far and the following are the two issues facing:
<div ng-controller="MainCtrl">
<div class="grid" masonry="true" column-width="460">
<div ng-repeat="item in items" class="item {{item.class}}">
<div><h1>{{item.name}}</h1></div>
<br /> <span>Age: {{item.age}}</span>
<br /> <span>Company: {{item.company}}</span>
</div>
</div>
</div>
Link to jsfiddle for my solution
instance 1
When there is enough space the smaller brick does not get adjusted. E.g. After "Collin Alston" i need to have "Jasmine Rollins" and likewise. How would i accomadate this change? (see for image below as well)
instance 2
Why is it that "style" attribute gets applied to child elements? i need the style to be applied to "item w1 masonry-brick" and not child div's.
I had in instance 1 and changed it to for instance 2 to show the two problems im facing. Hope to get some answers to work my way out. Thank you in advance.
Update 1:
I managed to get masonry working with angular to this extend. Check this out http://jsfiddle.net/h5jfd1wm/38/
But still there are some empty spaces when i resize the window. It's like some bricks from the bottom can fill up those empty spaces. If you can help me out here.
So i have an array of slide image urls which i'm looping through here called slides.
<div class="presentForm" id="presentForm{{$index}}" ng:repeat="slide in slides" style="display: none;">
<img id ="presentationSlide" ng-src='{{slide}}' style="height: 300px" width="600px">
<label id="scriptLabel{{$index}}" for="slideScript{{$index}}" style="left:130px;">
Slide {{$index + 1}} Script
</label>
<textarea class="scriptText" name="Text" id="slideScript{{$index}}" ng-model="scripts{{index}}">
</textarea>
</div>
My problem arrises from the fact that I want to display a seconday array within this ng-repeat called scripts. The problem arises from the fact that scripts length might not match slides length (every slide might not have a script). So how could I display scripts[0] within the <textarea></textarea> but if scripts[3] doesn't exist display a blank text area?
This isn't a very thorough answer, but nested ng-repeat's should solve your problem. Let me know if I'm missing something.
EDIT: After re-reading your code. I think you might also need to rethink your data structure. scripts should be inside the slide object.
e.g.
slide = {name: 'slide1', scripts: ['script1', 'script2']}
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.