ngAnimate is not working - angularjs

enter code here.repeat-animation {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
position:relative;
}
.repeat-animation.ng-enter {
left:10px;
opacity:0;
}
.repeat-animation.ng-enter.ng-enter-active {
left:0;
opacity:1;
}
.repeat-animation.ng-leave {
left:10px;
opacity:1;
}
.repeat-animation.ng-leave.ng-leave-active {
left:-10px;
opacity:0;
}
.repeat-animation.ng-move {
opacity:0.5;
}
.repeat-animation.ng-move.ng-move-active {
opacity:1;
}
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<input class="form-control repeat-animation" type="text" ng-model="customerFilter.name" placeholder="Filter">
</div>
</div>
</div>
<br/><br/>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-responsive table-striped">
<tr class="repeat-animation">
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('order')">OrderTotal</th>
<th ng-click="doSort('joined')">Join</th>
<th>Orders</th>
<th>Delete</th>
</tr>
<tr ng-repeat="cust in customers |filter:customerFilter | orderBy:sortBy:reverse">
<td>{{ cust.name | uppercase }}</td>
<td>{{ cust.city }}</td>
<td>{{ cust.orderTotal | currency: 'AED ' }}</td>
<td>{{ cust.joined | date}}</td>
<td>View Orders</td>
<td class="center"><span class="glyphicon glyphicon-remove delete" ng-click="remove(cust.id)"></span></td>
</tr>
</table>
</div>
</div>
</div>
<br/>
<div class="container">
<div class="row" >
<div class="col-md-4">
<span class="lead">Total number of customers : {{ customers.length }}</span>
</div>
</div>
</div>
I have included ngAnimate script and dependency also but my animations are not working
can anyone solve my issues please,i edit my question with ng repeat,now can you please suggest and my angular and animate version is 1.5

The class you use for your animations need to be placed on the elements you want animated.
In your case it needs to be placed on the same element as ng-repeat:
<tr class="repeat-animation" ng-repeat="...">

Related

Angularjs-probelm dont work $compile after get response of ajax

i created directive for making print page.this directive have template page that included button and print template(this have ngRepeat on Result object).print button was clicked fire "click" funciton in Controller of directive then ajax request send to server for get array of object that fill print tamplate.
Mainpage.html
<div ng-class="{'btn':true,'btn-warning':true,'disabled':disableBtn}" data-toggle="modal"
ng-click="getdetail=true;" data-target="#detailModal">order detail</div>
<print-order disable-btn="disableBtn" order="selectedItem"></print-order>
print.template.html
<a ng-click="ctrl.click()" ng-class="{'btn':true,'btn-info':true,'disabled':ctrl.disableBtn}" >
print
<i class="fa fa-print"></i>
</a>
<div id="printSection">
<table style="width: 100%;font:13px tahoma;" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="border-bottom: 3px solid black;">
<p>number: </p>
{{ctrl.order.fldTracking}}
</th>
<th>
<img src="/images/receipt-logo.png" alt="">
</th>
<th style="border-bottom: 3px solid black;">
<p>code :</p>
<p> {{ctrl.order.customer.fldMobilePhone}}
<br> {{ctrl.order.fldAtFA.split("-")[0]}}
</p>
</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 3px solid black;">
<td colspan="3" style="padding: 10px;line-height: 20px;">
cutomer : {{ctrl.order.customerAddress.fldContactName }}
<br /> address: {{ctrl.order.customerAddress.fldAddress }}
<br/>mobile : {{ctrl.order.customerAddress.fldMobilePhone}}
<br/> phone : {{ctrl.order.customerAddress.fldTelephone}} </td>
</tr>
</tbody>
</table>
<h1>{{ctrl.title}}</h1>
<table dir="rtl" width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin-top:20px;border-top:2px solid #000000;;border-bottom:2px solid #000000;border-color: #000000">
<tbody>
<tr>
<td width="40%" style="padding-right:10px;font-size: 10px" align="right">name</td>
<td width="20%" style="font-size: 10px" align="center">number</td>
<td width="20%" style="font-size: 10px" align="center">price</td>
<td width="25%" style="font-size: 10px" align="right">price</td>
</tr>
<tr ng-repeat="item in ctrl.Components track by $index">
<td style="padding-right:10px;font-size: 9px">
{{item.offer.fldTitle}}<br>
</td>
<td style="font-size: 12px" align="center">{{item.fldQty}}</td>
<td style="font-size: 10px" align="center">{{item.fldUnitPrice}}</td>
<td style="font-size: 10px;padding: 5px">{{item.fldTotalPrice}}</td>
</tr>
</tbody>
</table>
</div>
printdirective.js
myApp.directive("printOrder",["$window","orderService","$timeout","$compile",function($windows,orderService,$timeout,$compile){
return{
restrict:"AE",
bindToController:{
disableBtn:"=",
order:"="
},
templateUrl:"/Widgets/printOrder.template.html",
transclude: true,
scope:true,
controllerAs:"ctrl",
controller:function(){
this.click=function(){
var popupWinindow =$windows.open("", '_blank', 'width=300,height=500');
orderService.getOrderDetail(this.order.id)
.then(function(result){
this.Components=result;
popupWinindow.document.open();
var el=angular.element("#printSection")
$compile(el)(this);
$timeout(function(){
// console.log(el.html());
popupWinindow.document.write(
`<html>
<head></head>
<body style="direction: rtl;">`+el.html()+` </body>
</html>`);
popupWinindow.document.close();
},500)
});
}
},
}
}])
when i clicked on print button .id of order send to directive then detail of order request of server with ajax that this should fill "#printSection" of template by $compile but this dont binding and Components property is empty.
but this dont binding and Components property is empty.
You cannot call $compile with this, in your case $compile(el)(this);
this != scope
Use:
controller:function($scope){
$compile(el)($scope);
}
Small Demo
Is it typo? var el=angular.element("#printSection")
Did you mean something like:
var warapper = document.querySelector('#printSection');
angular.element(warapper); //...

Add new row in a table using ng-repeat

I have one table in that am trying to do following functions:
Initially one empty row and add button will be there.
When I click add button after entering details in first row, new row should be added and the first row value also should be displayed.
My code below:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope, $http, $timeout) {
$scope.addContactDetail = function () {
$scope.contactDetails = {
email: $scope.contactDetail.email,
bolId: $scope.contactDetail.billId
};
}
});
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.addbtn{
text-align: center;
background-color: #ededed;
padding-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<table class="table table-striped table-bordered dataTable ">
<thead>
<tr>
<th>Email</th>
<th>B#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contactDetail in contactDetails">
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="bill"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="bill">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
<tr>
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="bill"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="bill">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
</tbody>
</table>
<div class="addbtn" ng-click="addDetail()">
<span>ADD</span>
</div>
</div>
</body>
When I click add button after entering data in first row, 3 new rows are being added before the first row. What's wrong?
You have 3 new rows added, since you are adding 3 properties to the $scope.contactDetails object and ngRepeat iterates over them. You simply can have an array of contactDetails and add new item to this array in your addContactDetail method, like this:
var app = angular
.module("myApp", [])
.controller("myCtrl", function ($scope) {
//first row initially empty
$scope.contactDetails = [{}];
$scope.addContactDetail = function () {
//add more empty rows
$scope.contactDetails.push({});
}
});
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.addbtn{
text-align: center;
background-color: #ededed;
padding-top: 10px;
padding-bottom: 10px;
border-style: solid;
border-color: #b3b3b3;
border-width: 0px 1px 1px 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<table class="table table-striped table-bordered dataTable ">
<thead>
<tr>
<th>Email</th>
<th>B#</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contactDetail in contactDetails">
<td><label><input type="text" ng-model="contactDetail.email"/></label></td>
<td>
<span class="onoffswitch margin-left-zero">
<input type="checkbox" class="onoffswitch-checkbox toggleSwitch"
id="{{contactDetail.bolId + 'Bol'}}"
ng-model="menu.create"/>
<label class="onoffswitch-label" for="{{contactDetail.bolId + 'Bol'}}">
<span class="onoffswitch-inner" data-swchon-text="YES" data-swchoff-text="NO"></span> <span
class="onoffswitch-switch"></span>
</label>
</span>
</td>
</tr>
</tbody>
</table>
<div class="addbtn" ng-click="addContactDetail()">
<span>ADD</span>
</div>
</div>
</body>

elementnotvisibleexception for dropdown

I am having following problem. I have a table which contains a dropdown in each row corresponsing to first column element of that particular row. But when i try to select an element from a particular dropdown, i am getting element not visible exception.
Here is the page structure :-
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabPopup::content" style="top:auto;right:auto;left:auto;bottom:auto;width:auto;height:auto;position:relative;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog" class="x1c9">
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<div class="x1dh" data-afr-panelwindowbackground="1" style="display: none;"/>
<table class="x1cg" border="0" cellspacing="0" cellpadding="0" summary="" data-afr-shaddec="sd$1">
<tbody>
<tr>
<tr>
<td id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::_cse" class="p_AFResizable x1ct"/>
<td id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::contentContainer" class="p_AFResizable x1o" tabindex="-1">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabDialog::_ccntr" class="x1cr" style="width:800px;height:450px;position:relative;overflow:auto;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:grabpgl1" class="x1a">
<div>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pgl108" class="x1a" style="margin-left:15px; width:auto;min-height:500px;/*width:750px;height:500px*/">
<div>
<div>
<div>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:psl2" class="xpq" style="margin-left:15px; width:auto;min-height:450px; /*width:720px;height:450px*/">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:psl2::f" class="xrd" style="left:0px;top:0px;height:181px;right:0px;padding:0px;border-width:0px">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pglks4" class="x1a" style="position:absolute;width:auto;height:auto;top:0px;left:0px;bottom:0px;right:0px">
<div>
<table id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:j_id__ctru13pc10" class="xsk x1a" border="0" cellspacing="0" cellpadding="0" summary="">
<tbody>
<tr>
<td>
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pb78" class="xsk xdn" style="height:165px">
<table class="xu2 p_AFCore p_AFDefault" border="0" width="0" cellspacing="0" cellpadding="0" summary="">
<div class="x1fp p_AFCore p_AFDefault">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:pb78::content" class="x5s p_AFCore p_AFDefault">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable" class="xsk xsw" _leafcolclientids="['dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru16pc10','dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru18pc10','dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:j_id__ctru21pc10']" style="height:114px" tabindex="0">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable::ch" class="x143" _afrcolcount="3" style="overflow: hidden; position: relative; width: 441px; border-right-width: 0px;">
<div id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable::db" class="x13v" _afrcolcount="3" style="position: relative; width: 441px; overflow: hidden; height: 85px; z-index: 1;">
<table class="x13w x14n" cellspacing="0" _startrow="0" _rowcount="10" _selstate="{'3':true,'2':true,'1':true,'0':true,'7':true,'6':true,'5':true,'4':true,'9':true,'8':true,'afrSelectAll':true}" _totalwidth="363" style="table-layout: fixed; position: relative; width: 441px;">
<tbody>
<tr class="x13u " _afrrk="0">
<tr class="p_AFFocused p_AFSelected x13u " _afrrk="1">
<td class="x14j" align="center" nowrap="" style="">
<td class="x14j" align="center" nowrap="">
<span id="dc1:j_id__ctru2pc2:j_id__ctru10pc2:r1:0:grdeccomp:GAFComp:changesTable:1:j_id__ctru19pc10" class="p_AFFocusTarget p_AFHoverTarget x1z">
The last dropdown is the is the item from where i am trying to select an option but getting this exception .
And below is the code that i used to find it.
WebElement we = driver.waitVisible(By.xpath("//div[contains(#id,'changesTable::db')]/table//span[.='" + currentActivity + "']"));
scrollIntoView(we);
Select select = new Select(driver.waitVisible(By.xpath("//div[contains(#id,'changesTable::db')]/table//span[.='" + currentActivity + "']/../..//select")));
select.selectByVisibleText(newActivity);

Recent version of AngularJS broke workings of multiple groups of radio buttons

I had a view with multiple groups of radio buttons that worked great, but was using a really old version of AngularJS (v1.0.2 as I was playing with an existing fiddle I had found on the net)
Example using AngularJS v1.0.2
As soon as I upgraded to v1.4.8, it stopped working as expected - i.e. only the last group of radio buttons in each panel have their applicable radio button checked while all others groups had no radio buttons checked.
Example with newer version of AngularJS
Has anyone got an idea as to what I may be doing wrong? Any help would be much appreciated. Below is the html involved
<body ng-controller="Channels" class="container-fluid">
<div ng-if="sections===null">
Loading...
</div>
<div class="panel-group" id="accordion1" ng-if="sections!==null">
<div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">
<div class="panel-heading">
<div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
<a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
<span class="panel-title" ng-bind="item.resourceCode"></span>
</a>
</div>
<div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
<table class="table">
<thead>
<th class="col-sm-6">Name</th>
<th class="col-sm-2 text-center">Read</th>
<th class="col-sm-2 text-center">ReadWrite</th>
<th class="col-sm-2 text-center">None</th>
</thead>
<tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
<td class="col-sm-6"><span ng-bind="subitem.resourceCode"></span></td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>
not to worry...managed to solve it using a form element between the sections and changed the naming of the radiobuttons
<body ng-controller="Channels" class="container-fluid">
<div class="panel-group" id="accordion1" ng-if="sections!==null">
<div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">
<div class="panel-heading">
<div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
<a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
<span class="panel-title" ng-bind="item.resourceCode"></span>
</a>
</div>
<div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
<form>
<table class="table">
<thead>
<th class="col-sm-6">Name</th>
<th class="col-sm-2 text-center">Read</th>
<th class="col-sm-2 text-center">ReadWrite</th>
<th class="col-sm-2 text-center">None</th>
</thead>
<tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
<td class="col-sm-6"><span ng-bind="subitem.resourceCode"></span></td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
</td>
<td class="col-sm-2 text-center">
<input type="radio" name="access_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
</td>
</tr>
<tbody>
</table>
</form>
</div>
</div>
</div>

AngularJS Filter based on radio selection

I am implementing a search input box that should search based off of a certain property of the objects that are getting iterated over and I would like them to be selected using a radio button.
For example here is my code:
<span style="margin-bottom: 10px; display: inline-block;">Search: <input ng-model="searchText.CustomerName" /> </span>
<table id="Table1" class="alertTable">
<thead>
<tr>
<th class="xsmCol"><img src="/App_Themes/SkyKick/images/misc/clear.gif" class="iFlag" /></th>
<th>Subject</th>
<th>Customer</th>
<th>Type</th>
<th>Date</th>
<th class="smCol">Actions</th>
</tr>
</thead>
<tbody id="tbAlerts">
<tr ng-repeat-start="alert in alerts | filter:searchText" > <!-- | filter:searchText -->
<td><img src="/App_Themes/SkyKick/images/misc/clear.gif" data-tooltip="{{ alert.tooltip }}" class="{{ 'iAlert' + alert.AlertType }}"/></td>
<td>{{ alert.Summary }}</td>
<td>{{ alert.CustomerName }}</td>
<td>{{ alert.CreatedDate }}</td>
<td>{{ alert.Category }}</td>
<td>
<!-- Tricky little widget logic -->
</td>
</tr>
<tr ng-repeat-end class="alertDetail">
<td></td>
<td colspan="5" ng-bind-html="alert.Details"></td>
</tr>
</tbody>
</table>
As you can see, I am currently filtering based off of the CustomerName field in my array. However, I want to change the logic so that I can select between CustomerName, Subject, Type, and Date using a radio button. So if the user clicks the Date radio button, then the searchText will filter only based off the Date attribute. What is the best way to get this functionality?
Create a set of radio buttons which share the same ng-model value. Use that value to set the key on searchText:
<span style="margin-bottom: 10px; display: inline-block;">Search:
<input ng-model="searchText[selectedSearch]" ng-init="searchText = {};
selectedSearch='CustomerName'" />
</span>
<input type="radio" ng-model="selectedSearch" value="CustomerName" > Customer Name
<input type="radio" ng-model="selectedSearch" value="CreatedDate" > Created Date
<input type="radio" ng-model="selectedSearch" value="Category" > Category
Demo
angular.module('myApp', []).controller('candidateCtrl', function($scope) {
$scope.candidates = [
{name:'Goutam',role:'Engineer',country:'India'},
{name:'Carl',role:'Engineer',country:'Sweden'},
{name:'Margareth',role:'Doctor',country:'England'},
{name:'Hege',role:'Engineer',country:'Norway'},
{name:'Joe',role:'Engineer',country:'Denmark'},
{name:'Rathin',role:'Doctor',country:'India'},
{name:'Birgit',role:'Teacher',country:'Denmark'},
{name:'Mary',role:'Engineer',country:'England'},
{name:'Kai',role:'Teacher',country:'Norway'}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="candidateCtrl">
<h2>Bootstrap inline Radio Buttons</h2>
<div class="row">
<div class="col-lg-4">
<p>Angular JS Filter by Radio Button</p>
<form>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Engineer">Engineer
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Doctor">Doctor
</label>
<label class="radio-inline">
<input type="radio" name="optradio" ng-model="searchText.role" value="Teacher">Teacher
</label>
</form>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Profession</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="candidate in candidates | filter:searchText:strict">
<td>{{candidate.name}}</td>
<td>{{candidate.role}}</td>
<td>{{candidate.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>

Resources