I have this markup:
<div class="row" ng-repeat="value2 in requirements | orderBy:'ControlGroupIdentifier'">
<div class="col-lg-12">
<div ng-repeat="controlgroup in value2.ControlGroup"
ng-show="controlgroup.ListOfControls.length > 0">
<table ng-if="controlgroup.ListOfControls.length > 0">
<tbody>
<tr ng-repeat="value in controlgroup.ListOfControls = (controlgroup.ListOfControls | filter: searchCompanyControl )">
</tr>
</tbody>
</table>
</div>
</div>
</div>
What I'm trying to do is hide the first div which has the ng-repeat for requirements if all control groups are hidden based on
controlgroup.ListOfControls.length > 0
I'm able to hide the second div ng-repeat but I'm not sure how to hide the most outer ng-repeat if all the control groups in the requirement are hidden based on the condition that there are no list of controls.
You could use "ng-if" on the top div.
<div class="row" ng-if="controlgroup.ListOfControls.length > 0" ng-repeat="value2 in requirements | orderBy:'ControlGroupIdentifier'">
I am not sure if this would cancel your ng-repeat or not, but if it does, you could wrap it in its own div.
eg.
<div ng-if="controlgroup.ListOfControls.length > 0">
<div class="row" ng-repeat="value2 in requirements | orderBy:'ControlGroupIdentifier'">
Please let me know if this helps!
Related
I have a table that dynamically produces rows based on certain criteria. However, I want the rows to be limited to just 5 rows maximum. If there are more than 5 rows, I want a link to appear at the bottom of the table that says "More Articles". If there are 5 rows or less, I don't want the "More Articles" link to be visible. I'm pretty sure I have to use a ng-if here, but not sure how to construct it. Any suggestions?
<table class="table table-sm table-responsive">
<thead>
<tr>
<th class="wrap-header"><big class="big-text">My Benefits Articles</big></th>
</tr>
</thead>
<tbody ng-repeat="item in data.list track by $index | limitTo: 5">
<tr>
<td><a ng-href="{{item.url}}" target="_blank"> <img class = "icon" src="{{item.icon}}" height="30" width="30"> {{ item.short_desc }}</a></td>
</tr>
</tbody>
</table>
<div ng-if="/* What goes here? */">
<a ng-href="/fedhc/?id=kb_category&kb_category={{item.parent}}" target="_blank">More Articles <i class="fa fa-caret-right"></i></a>
</div>
<div ng-if="data.list.length > 5">
<a ng-href="/fedhc/?id=kb_category&kb_category={{item.parent}}" target="_blank">More Articles <i class="fa fa-caret-right"></i></a>
</div>
You can also use an ng-show which shows something meeting a certain criteria.
This is better practice than using ng-if for showing content.
<div ng-show="data.list.length > 5">
<a ng-href="/fedhc/?id=kb_category&kb_category={{item.parent}}" target="_blank">More Articles <i class="fa fa-caret-right"></i></a>
</div>
Here is documentation for both:
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngIf
Hope this helps!
Firstly, i would use a variable to determine how many posts are shown. This can be achieved by changing limitTo: 5 to limitTo: shownPosts (remember to declare it and set to 5 in your scope aswell)
Then, you'd want to check if you got more posts than are visible.
<div ng-if="data.list.length > shownPosts">
Side note: You want to increment the shownPosts variable by 5 every time you click the button.
I have a directive which will create bootstrap columns dynamically . The problem is directive columns width is not equal to the statically creating bootstrap columns.
E.g
<my-directive></my-directive>
<div class="row">
<div style="background:green" class="col-md-4 col-sm-4">
</div>
<div style="background:green" class="col-md-4 col-sm-4">
</div>
<div style="background:green" class="col-md-4 col-sm-4">
</div>
</div>
mydirectiveview.html
div class="row">
<div style="background:red" ng-repeat="tile in Tiles" ng-init="colsspan=12/configInfo.Tiles.length" class="col-sm-{{colsspan}} col-xs-12 col-md-{{colsspan}}>
</div>
</div>
My problem is width of the directives div is not equal when compare to the div created in static so that the div as not aligned properly
Can anyone help me in this ??
I want both the directive div and div created in html file should be in same size and aligned properly.
Hi I can't see your directive code, nut mayby
there is something wrong
> ng-repeat="tile in Tiles"
>
> ng-init="colsspan=12/configInfo.Tiles.length"
once you've got Titles and after that is configIngo.Titles
please see here for working solution
http://plnkr.co/edit/QoPL5xydTXoX17tV1XZd?p=preview
Row class does not behave like table. It will adjust its height and width automatically. i will recommend you to use Table for a smooth layout.
<table class="table table-bordered ">
<thead>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="grid in gridData">
<td>{{grid.h1}}</td>
<td>{{grid.h2}}</td>
<td>{{grid.h3}}</td>
</tr>
</tbody>
</table>
I have an table in HTML with some rows that content information about users.
I can click on each rows.
So, i would like to know must I use ng-hide/ng-show? Is it right way or exists more well solutions in Angular JS?
I mean:
<div class="table" ng-show="details == false">
<div class="row"></div>
</div>
<div class="tableDetails" ng-show="details == true">
<div class="row">Name</div>
<div class="row">Post code</div>
</div>
When I click on <div class="row"></div> from class="table" then this table is hidden and is shown table class="tableDetails". When is loaded table 2, how I can display table 1 when I click button come back?
you can use these ways: ng-class | ng-(show|hide) | ng-if
<div class="table" ng-if="!details">
<div class="row"></div>
</div>
<div class="tableDetails" ng-if="details">
<div class="row">Name</div>
<div class="row">Post code</div>
</div>
I have the following code to display 3 different types on the page:
Production
Development
Maintenance
And I want the entire section (Production h4 and table/tbody) to disappear if there is no content in filteredResults. (Only appear if there is content)
<span ng-repeat="type in types">
<table class="max-width">
<tbody>
<div class="row" ng-repeat="result in filteredResults = (results | filter:search) | filter: status('status', type)">
<div class="left-header-padding" ng-if="$index==0">
<tr class="pull-left">
<h4 class="title">{{type.charAt(0).toUpperCase() + type.substring(1)}}</h4>
</tr>
</div>
</div>
</tbody>
</table>
</span>
I am currently trying ng-if for content inside the table, checking if ng-repeat occurs and only rendering the if there is content in ng-repeat, but I want the entire section (table included) to disappear when there is no content. Does anyone know how to accomplish this?
if you want hide table put ng-show into table tag ie:
<table class="max-width" ng-show="filteredResults.length >0">
<tbody>
<div class="row" ng-repeat="result in filteredResults = (results | filter:search) | filter: status('status', type)">
<div class="left-header-padding">
<tr class="pull-left">
<h4 class="title">{{type}}</h4>
</tr>
</div>
</div>
</tbody>
add ng-show="filteredResults.length" to your table element
<table ... ng-show="filteredResults.length">
example: http://plnkr.co/edit/WFQzRtXFe3UnvuzA8psa?p=preview
also, iv'e used tr inside tbody instead of div
Try using ng-init to create a local filtered collection and use the ng-if statement to hide the table if there is no items in the filtered collection.
<div ng-repeat="type in types">
<div ng-init="filteredResults = (results | filter:search) | filter: status('status', type)">
<table class="max-width" ng-if="filteredResults.lenght > 0">
<tbody>
<div class="row" ng-repeat="result in >
<div class="left-header-padding" ng-if="$index==0">
<tr class="pull-left">
<h4 class="title">{{type.charAt(0).toUpperCase() + type.substring(1)}}</h4>
</tr>
</div>
</div>
</tbody>
</table>
</div>
</div>
Let me know if you have any questions.
I am trying to change the class of an individual div when it is clicked on and what I have is not working. I'm having trouble understanding how ng-click and ng-class work together so that is why I'm having trouble figuring this out. What do I need to do or put inside my changeBackground function so that individual div will have a class applied?
<div ng-controller="BoardController">
<div class="rows" ng-repeat="r in rows track by $index" ng-click="changeBackground($index)" ng-class="{ red: }">
</div>
</div>
$scope.changeBackground = function(index) {
};
Try:
<div ng-controller="BoardController">
<div class="rows" ng-repeat="r in rows track by $index"
ng-click="r.clicked = !r.clicked" ng-class="{ 'red':r.clicked }">
</div>
</div>