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.
Related
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!
I want to show message when ng-repeat collection is empty i.e.:
<div ng-init="filteredArray=(array|filter:{...})">
<h1 ng-if="!filteredArray.length">Empty array</h1>
<table ng-if="filteredArray.length">
<tr ng-repeat="element in filteredArray">
<td>{{element}}</td>
</tr>
</table>
</div>
The problem is that ng-init will not watch for modification of the source array. Any hint how to do it properly?
You can just create the filtered variable in the ng-repeat, and use that one:
<div>
<h1 ng-if="!filteredArray.length">Empty array</h1>
<table ng-if="filteredArray.length">
<!-- here angular assigns the filtered array to the 'filteredArray' variable,
which then can be used -->
<tr ng-repeat="element in filteredArray=(array|filter:{...})">
<td>{{element}}</td>
</tr>
</table>
</div>
See also this jsfiddle
EDIT
If you don't like the ugly expression, you can also do something like this:
function myController ($scope, $filter) {
$scope.$watch("theFilter", function (val) {
$scope.filteredArray = $filter("filter")($scope.array, val);
});
}
And in your html:
<tr ng-repeat="element in filteredArray">
..
</tr>
Check in this jsfiddle
Check ng-repeats $last to show your message like below
<div ng-repeat="n in data track by $index">
<h1 ng-if="$last">Empty array</h1>
</div>
In your case you can have a variable at the table level and then set it to $last,when it'll be true your message will show like below
<body ng-app="app" ng-controller="ctrl">
<div ng-init='counter=false'>
<h1 ng-if='counter'>Empty array</h1>
<table ng-if="myData.length">
<tbody>
<tr ng-repeat="element in myData track by $index" ng-init="counter=$last">
<td>{{element}}
<ng-if ng-init='sync($last)'/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
Your controller should look like below
var app=angular.module('app',[])
app.controller('ctrl',function($scope){
$scope.myData=['a','b','c']
$scope.sync=function(val)
{
alert(val)
$scope.counter=val
}
})
Since you have stored (array|filter:{...}) value into filteredArray, you cannot modify it in the template.
You should repeat (array|filter:{...}) code in the template.
<h1 ng-if="!(array|filter:{...}).length">Empty array</h1>
<table ng-if="(array|filter:{...}).length">
<tr ng-repeat="element in (array|filter:{...})">
<td>{{element}}</td>
</tr>
</table>
On ng-click of a <div> I am showing a particular <div> and doing some filtering. I need the filter to happen on more than one value.
In the code below I want something like
filter if evaluationStatusId == 11 or 12
HTML :
<div style="font-size:40px;margin-top:10px" ng-click="clickedStatus='9'">
{{Approved}}
</div>
<div style="font-size:40px;margin-top:10px" ng-click="clickedStatus='10'">
{{submitdMissnDocs}}
</div>
<div style="font-size:40px;margin-top:10px" ng-click="clickedStatus='11 || 12'">
{{Denied}}
</div>
<div class="row" name="empList" id="empList" ng-show="clickedStatus">
<table class="table table-bordered table-striped">
<tbody>
<tr ng-repeat="emp in Summary.CorpEmployees | filter: {locationId:selectedItem.Label} | filter: {evaluationStatusId:clickedStatus}">
</tbody>
</table>
</div>
You can use a filter function like this:
$scope.myFilter = function(emp){
return emp.locationid === $scope.selectedItem.Label || emp.evaluationStatusId === $scope.clickedStatus;
};
So your repeat expression would be:
<tr ng-repeat="emp in Summary.CorpEmployees | filter: myFilter">
I have a table and buttons inside a loop, this picture shows the results of what I get depending on the search
html
<div class="col-sm-4" ng-repeat="x in names">
<div class="panel panel-primary" id= "{{ x.myIndex }}" >
<div class="panel-heading">
<h3 class="panel-title">{{ x.ID }} {{ x.Name }}
<button ng-click="showCommentsWithID(x.ID)" style="float: right;" class="btn btn-xs btn-primary glyphicon glyphicon-comment"> 42</button>
</h3>
</div>
<div class="panel-body">
<table width="" border="0" ng-repeat="c in comments" id= "{{ c.ID}}" ">
<tr>
<td width="30">{{ c.ID }}</td>
<td >{{ c.Comment}}</td>
</tr>
</table>
</div>
</div>
</div><!-- /.col-sm-4 -->
js
function ContactController($scope,$http) {
$scope.showCommentsWithID= function(myID) {
var page = "mySQL.php?func=getComments&id=" + myID;
$http.get(page).success(function(response) {$scope.comments = response;});
}
}
When I click on the comment Button I want to display the comments according to that ID.
This is working fine except that the comments are loaded to all tables and not only to the table with the right ID. In this example I clicked on ID 1 Coka Cola.
Where do I need to apply a filter the js or html? both? ...
![enter image description here][3]stack.imgur.com/gqyPR.jpg
You can simply bind your comments with your product's id in order to make it unique for each product.
What we need to do is to add product's id to $scope.comments as following:
function ContactController($scope,$http) {
$scope.comments = {}; // Init comments object.
$scope.showCommentsWithID= function(myID) {
var page = "mySQL.php?func=getComments&id=" + myID;
$http.get(page).success(function(response) {$scope.comments[myID] = response;});
}
}
Then, you can simply loop through it:
<table width="" border="0" ng-repeat="c in comments[x.ID]" id= "{{ c.ID}}" ">
<tr>
<td width="30">{{ c.ID }}</td>
<td >{{ c.Comment}}</td>
</tr>
</table>
Is there anyway I can get ng-switch working inside a table? The table example is not working but the ul example just work fine. The problem is that I really need the table example. I am using angular 1.07.
<table>
<tbody ng-repeat="item in items">
<tr><td>{{ item.heading }}</td></tr>
<tr ng-repeat="row in item.fields" ng-switch on="row.nb">
<div ng-switch-when="01">
<td>{{ row.nb }}</td>
</div>
</tr>
</tbody>
</table>
<ul ng-repeat="item in items">
<li ng-repeat="row in item.fields" ng-switch on="row.nb">
<div ng-switch-when="01">
{{ row.nb }}
</div>
</li>
</ul>
You need to move the ng-switch-when to the td otherwise it will ignore it as invalid because a div is not valid markup inside a tr. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
Remove the div and change it to:
<td ng-switch-when="01">{{ row.nb }}</td>
Demo: http://plnkr.co/edit/yHkBGekjgGDts8pNtekJ?p=preview