I have below an HTML code which utilizes ng-repeat to show data. The data is separated to two columns, and each column will have more or less the same number of data (shown through links).
However, to do this, I traversed through the same set of data twice, with two different ng-repeat conditions (with the first traversal showing the first set of data in the first column, and the second traversal showing the second set of data in the second column).
I believe this is really redundant (and time consuming, too), because for the first traversal, I get the first half of the data then skip the rest (by ng-if), and for the second traversal, I get the second half.
Is there a way to traverse through the data just once, but still being able to show the division of data?
Note: I've tried putting ng-repeat before the first < div class="column" >, and keep the conditionals inside < a >, but what happens is that even the < div class="column" > repeats, which shouldn't be the case. I just want the < a > tags to repeat in their corresponding columns.
Code
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies" ng-if="$index <= (agencies.length/2)">
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies" ng-if="$index > (agencies.length/2)">
{{agency.name}}<br>
</div>
</h5>
</div>
</div>
My improvement is to use 'limitTo' pipe, instead of ng-if.
Look at this version, it's more efficient.
{{agFull = agencies.length; ""}}
{{agHalf = agFull/2; ""}}
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies | limitTo : agHalf">
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies | limitTo : agFull : agHalf">
{{agency.name}}<br>
</div>
</h5>
</div>
</div>
I would also recommend to store agencies.length & agencies.length/2 in a variable, as I did above. You can also use the controller for that, if you don't like template variables.
Since you are looking to optimize, i suggest that you split your array in to two in the controller. This will remove the redundancy. Don't let your view to the the controller's work.
<div class="ui two column doubling stackable grid">
<div class="column">
<h5>
<div ng-repeat="agency in agencies[0]" >
{{agency.name}}<br>
</div>
</h5>
</div>
<div class="column">
<h5>
<div ng-repeat="agency in agencies[1]">
{{agency.name}}<br>
</div>
</h5>
</div>
Related
Hi i need to wrap an array like this [TASK 1, TASK 2, TASK 3].
In HTML i want to display it like that TASK 1, TASK 2... and then with a tooltip the user can see the rest of the tasks.
I need that because i have little space in the col.
The piece of HTML is structured like that
EDIT:
<div class="col-2 border-right-yellow fw-bold">
<div class="row body-cells flex-center">
<div class="col-8">
<div class="row">
<div class="col">{{resource.resourcePlanDTO.cognome}}</div>
<div class="col">{{resource.resourcePlanDTO.nome}}</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col">
{{getTasks(resource)}}
</div>
</div>
</div>
</div>
</div>
getTasks is the method i use to take the string array from the back-end
I tried to use some flexbox classes but it didn't work :(
Now the array is displayed like you can see in the image in the column No.Task
Anyone can help? :)
I am learning angular n making a project. display table
I have this above page in which I want to separate the records by type. however I am not able to get the condition right. Can someone help me. Below is my code.
<div class="row">
<div class="col">
<h3>Escalations</h3>
</div>
</div>
<div ng-if="notes.values === 'Escalations' ">
<app-list-view
[data]="notes.values"
[cols]="notes.cols"
[routeInfo]="notes.routeInfo"
[sortBy]="'isActive'">
</app-list-view>
</div>
I have to iterate over the html content of each div one by one.
<div class="category"> 1 </div>
<div class="category"> 2 </div>
<div class="sub-category"> <ul><li></li>....</ul> </div>
<div class="category"> 4 </div>
<div class="sub-category"> <ul><li></li>....</ul> </div>
<div class="category"> 6 </div>
I have tried
element.select("div.category")
element.select("div.sub-category")
it fetches data but not in sequence.
I just want to fetch one category then its sub-category. Also note that some category don't have sub-categories.
Kindly suggest anyone, the proper way to do this. Thanks.
You can use these syntaxes:
[attr^=value]: for elements with attributes that start with value
[attr$=value]: end with value
[attr*=value]: contain the value
In your case: "category" & "sub-category" both contain the substring "category" and end with "category" therefore you can use:
.select("div[class*=category]") or
.select("div[class$=category]")
Let's say I have a product within a collection. Is it appropriate to call the product "feature-collection__product" so it's still an element within the block of "feature-collection" or call it "feature-collection-product" so it becomes it's own block, as it has other elements within it, or something different.
<div class="feature-collection">
<div class="feature-collection__product">
<h2 class="feature-collection__product-title"></h2>
<h2 class="feature-collection__product-price"></h2>
</div>
</div>
OR
<div class="feature-collection">
<div class="feature-collection-product">
<h2 class="feature-collection-product__title"></h2>
<h2 class="feature-collection-product__price"></h2>
</div>
</div>
Most likely the correct answer is both:
<div class="feature-collection">
<div class="feature-collection__product product">
<h2 class="product__title"></h2>
<h2 class="product__price"></h2>
</div>
</div>
The situation when you have different entities on the same DOM node is called mix. In this case it's reasonable to have independent block product and also an element of feature-collection to set some styling for production inside feature-collection.
For more info about mixes please take a look at https://en.bem.info/methodology/key-concepts/#mix and https://en.bem.info/methodology/faq/#mixes
I started to use Twitter bootstrap for this application that I am working on.
I read the documentation about nesting rows in both fixed grid system and in fluid one.
Now, I want to do something like this
So of course I could do something like this
<div class="container">
<div class="row">
<div class="span 12">red</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
</div>
and I think I would get what I want. But I am wondering what are the consequences of doing
<div class="container">
<div class="row">
<div class="span 12">red</div>
</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
I don't see any difference now in my browser but I am wondering what will happen if I include multiple row elements in single container tag. Is the row-nesting the only proper way to create something like I showed? What is the difference between those two implementations of my design, so to speak?
The second version is more correct. But both work. The difference is how it responds when the page is re-sized. The second version will shrink and react better
However if you want the containers to match the above image you need to use class="container-fluid" and class="row-fluid"
Also remove the spaces between the spans and numbers
class="span 3"
Should say
class="span3"