I am trying to show a more detailed summary of a row when a user clicks on the "+" icon on the row. I got it to work when I used an tag but when I modified it to an tag, the javascript would not kick in.
Here's what I have:
<table class="table" ng-repeat="lineItem in order.OrderLineItems">
<tbody >
<tr >
<td class="col-md-3"><a ng-hide="!lineItem.OrderLineItemModifiers.length " class="glyphicon glyphicon-plus" ng-model=show></a> <b>Item</b></td>
<td class="col-md-3">{{lineItem.Name}}</td>
<td class="col-md-3">{{lineItem.Quantity}}</td>
<td class="col-md-3">{{lineItem.TotalPrice}}</td>
</tr>
<tr ng-repeat="modifiers in lineItem.OrderLineItemModifiers" ng-show="show">
<td class="col-md-3"></td>
<td class="col-md-3 ordermodifier">{{modifiers.Name}}</td>
<td class="col-md-3"></td>
<td class="col-md-3 ">{{modifiers.TotalPrice}}</td>
</tr>
</tbody>
</table>
<div><b>Total Amount: {{order.TotalAmount}}</b></div>
And in the Javascript file:
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, order) {
$scope.toggleDetail = function ($index) {
$scope.activePosition = $scope.activePosition == $index ? -1 : $index;
};
});
What I am confused about is why would this work if I used an tag instead of an ? With the current code above, I would click on the "+" and it would not expand the row to show the modifier rows
Thank you!
<td class="col-md-3"><a ng-hide="lineItem.OrderLineItemModifiers.length !== 0 " class="glyphicon glyphicon-plus" ng-model=show></a> <b>Item</b></td>
try this. not sure what problem you had.
Related
Whenever I check a checkbox on a listing page, save it then go to page eg 2 (using pagination) and check something there and save it the checkbox on my first page is unchecked. I thought about using AJAX to save checked checkboxes to grails session but don't know how to do that - I'm beginner with JS and using views. Could someone help me out?
Here is the part with listing all companies and checkboxes in my gsp:
<g:form name="company-list-form" action="listCompany">
<div>
<g:textField id="search-field" name="query" value="${params.query}"/>
<span>
<g:checkBox id="only-blockades-box" name="onlyBlockades" class="submit-on-change" value="${params.onlyBlockades}" title="Pokaż tylko blokady"/>
<label for="only-blockades-box">Tylko blokady</label>
</span>
<g:actionSubmit value="${message(code: 'default.buttons.search', default: 'Szukaj')}" action="listCompany" class="button_orange"/>
<g:link action="listCompany" class="button_gray"><g:message code="default.buttons.clean" default="Wyczyść"/></g:link>
</div>
<div class="padding-top">
<table class="table_td company-list-table">
<tbody>
<tr class="gray2">
<th class="first">Id</th>
<th style="max-width: 100px;">Nazwa</th>
<th>Id Kontrahenta</th>
<th title="Dostęp do TPO">TPO</th>
<th style="width: 20px;" title="Dostawa bezpośrednio do magazynu">Dostawa bezpośrednio</th>
<th style="width: 20px;" title="Możliwość potwierdzania zamówień">Potwierdzanie zamówień</th>
<th style="width: 20px;" title="Możliwość importowania awizacji z XLS">Import z Excel</th>
<th style="width: 20px;" title="Możliwość awizowania zamówionych indeksów">Awizacja zam. indeksów</th>
<th style="width: 20px;" title="Możliwość awizowania tygodniowego">Awizacja tyg.</th>
<th style="width: 20px;" title="Dostęp jedynie do awizowania tygodniowego">Tylko awizacja tyg.</th>
<th title="Limit AGD przypadający na każdą kratkę okna prywatnego">AGD</th>
<th title="Limit rowerów przypadający na każdą kratkę okna prywatnego">Rowery</th>
<th>Blokady</th>
<th class="is-blocked-th">Zablokowany?</th>
</tr>
<g:each in="${companyInstanceList}" var="company" status="i">
<tr class="${(i % 2) == 0 ? 'even' : 'odd'} table_td_gray2 ${i + 1 == companyInstanceList?.size() ? 'last' : ''}">
<td class="first" style="text-decoration: underline;">
<g:link action="editCompany" id="${company?.id}">${company?.id}</g:link>
</td>
<td>
${company?.name}
</td>
<td>
${company?.idKontrahenta}
</td>
<td>
<g:checkBox name="tpoAccess.${company?.id}" id="tpo-access-${company?.id}"
checked="${company?.tpoAccess}"/>
</td>
<td>
<g:checkBox name="directDeliveryAvailable.${company?.id}"
id="direct-delivery-available-${company?.id}"
checked="${company?.directDeliveryAvailable}"/>
</td>
<td>
<g:checkBox name="accessToOrderConfirmation.${company?.id}"
id="access-to-order-confirmation-${company?.id}"
checked="${company?.accessToOrderConfirmation}"/>
</td>
<td>
<g:checkBox name="accessToXlsImport.${company?.id}"
id="access-to-xls-import-${company?.id}"
checked="${company?.accessToXlsImport}"/>
</td>
<td>
<g:checkBox name="accessToOrderedProductsAvisation.${company?.id}"
id="access-to-ordered-products-confirmation-${company?.id}"
checked="${company?.accessToOrderedProductsAvisation}"/>
</td>
<td>
<g:checkBox name="accessToLimitedAvisation.${company?.id}"
id="access-to-limited-avisation-${company?.id}"
checked="${company?.accessToLimitedAvisation}"/>
</td>
<td>
<g:checkBox name="accessOnlyToLimitedAvisation.${company?.id}"
id="access-only-to-limited-avisation-${company?.id}"
checked="${company?.accessOnlyToLimitedAvisation}"/>
</td>
<td>
<input type="text" name="agdPrivateWindowLimit.${company?.id}"
value="${company?.agdPrivateWindowLimit}"
class="shortText" id="agd-private-window-limit-${company?.id}"
onchange="validateLimits('agdPrivateWindowLimit.${company?.id}')">
</td>
<td>
<input type="text" name="bicyclePrivateWindowLimit.${company?.id}"
value="${company?.bicyclePrivateWindowLimit}"
class="shortText" id="bicycle-private-window-limit-${company?.id}"
onchange="validateLimits('bicyclePrivateWindowLimit.${company.id}')">
</td>
<td>
<g:link class="button_gray" controller="productGroup" action="list" params="[companyId: company?.id, query: params.query ?: '']">
Blokady
</g:link>
</td>
<td>
<g:if test="${company?.findBlockades()}">
<span title="Dostawca ma aktywne blokady grup towarowych." class="bold large">
✓
</span>
</g:if>
</td>
</tr>
</g:each>
</tbody>
</table>
</div>
<div class="paginateButtons">
<g:paginate controller="company" action="listCompany" total="${companyInstanceTotal}"
params="[query: params.query ?: '']"/>
</div>
<div style="float:right;">
<g:link action="createCompany" class="button_orange">
<g:message code="default.button.create.label" default="Utwórz"/>
</g:link>
<g:actionSubmit action="updateCompanies" name="companyListSubmit" class="button_orange" value="Zapisz"/>
</div>
</g:form>
Here is my javascript file associated with that view:
function validateLimits(name) {
document.getElementsByName(name)[0].value = document.getElementsByName(name)[0].value.replace(/[A-Za-z!##$%^&*" "]/g, "");
var quantity = document.getElementsByName(name)[0].value;
var toBeAvised = 9999;
if (quantity.indexOf(',') > -1 || quantity.indexOf('.') > -1 || /*quantity == "" ||*/ isNaN(quantity)) {
alert("Limit musi być liczbą całkowitą");
document.getElementsByName(name)[0].value = '';
} else if (parseInt(quantity) > toBeAvised) {
alert("Podana liczba jest większa niż maksymalny limit równy " +toBeAvised + ".");
document.getElementsByName(name)[0].value = '';
} else if (parseInt(quantity) < 0) {
alert("Limit musi być liczbą dodatnią!");
document.getElementsByName(name)[0].value = '';
}
}
And here is controller method (listCompany):
def listCompany(Integer max) {
Person person = Person.read(springSecurityService.principal.id)
Company comp = person?.company
params.max = Math.min(max ?: 25, 100)
params.offset = params.offset ?: 0
params.readOnly = true
String q = (params.query as String)?.toLowerCase() ?: ""
def query = Company.where {
id != comp?.id
name =~ "%$q%" || idKontrahenta as String =~ "%$q%"
if (params.onlyBlockades == "on") {
id in ProductGroupBlockade.findAllByCompanyIsNotNullAndEnabled(true)*.companyId
}
}
List<Company> companyInstanceList = query.list([max: params.int("max"), offset: params.int("offset"), sort: "name"])
Integer count = query.count()
if (flash.message) {
params.errors = flash.message
}
[companyInstanceList: companyInstanceList, companyInstanceTotal: count, companySaved: params.companySaved, errors: params.errors]
}
How I could fix that so my checkboxes stay checked after saving? Right now they become unchecked whenever I go to next page and save some checkboxes there.
I tend to use DataTables for situations like this but it depends on the amount of data you're dealing with to how you go about it.
If you have a relatively small data set, say 1000 rows or fewer you can use a plain DataTable, if you have more than this then you may want to use a server side processing DataTable.
Using a DataTable you would do away with all the Grails pagination, give your table an ID and just create the table in javascript like:
<script type="text/javascript">
$(document).ready( function() {
$( '#companyListTable' ).DataTable();
} );
</script>
All the pagination is handled in javascript and check boxes are preserved when navigating through the table pagination.
The reason is that you need to build your own search parameters to be sent with pagination:
<g:paginate total="${instanceTotal}" params="${search}" />
a similar post can be found here with more details of how you build this search params included as links as a form of comment within it.
Edited to add if you wantd to actually ammend pagination yourself by checking additional stuff through jquery i.e.
var something = $('#somFIeld').val()
and adding something through javascript to current pagination instead then take a read of this answer
I want to create a table which contains dynamic Content. When clicking on an element, the Details should Show up in the next line. So i creatied the following:
<table ng-controller="TestCtrl">
<tr ng-repeat-start="word in ['A', 'B', 'C']">
<td><!-- Some Information, Image etc --></td>
<td ng-click="showDetails(word)">{{word}}</td>
</tr>
<!-- This is only visible if necessary -->
<tr ng-repeat-end ng-show="currentDetail == word">
<td colspan="2" ng-attr-id="{{'Details' + word}}"></td>
</tr>
</table>
And I have the following js code:
angular.module('maApp', []).controller("TestCtrl", function($scope, $document, $compile){
$scope.showDetails = function(word){
var target = $document.find("Details" + word);
//I checked it - target is NOT null here
//target.html("<div>Test</div>");
//target.append("<div>Test</div>");
var el = $compile("<div>Test</div>")($scope);
target.append(el);
//Show tr
$scope.currentDetail = word;
};
});
I also tried the commented Solutions above but nothing of it works (The tr is showing up however). I guess there is something wrong with $document.find("Details" + word) but I don't know what.
Ultimately I want to add an <iframe> and the source would contain the word.
Does anybody see what I'm doing wrong here?
No need for weird non-angulary DOM manipulation: All you need is this.
HTML:
<table ng-controller="TestCtrl">
<tr ng-repeat-start="word in ['A', 'B', 'C']">
<td><!-- Some Information, Image etc --></td>
<td ng-click="showDetails(word)">{{word}}</td>
</tr>
<tr ng-show="currentDetail==word" ng-repeat-end>
<td colspan="2">Details {{word}}</td>
</tr>
</table>
JS:
angular.module('myApp', []).controller("TestCtrl", function($scope, $document, $compile){
$scope.showDetails = function(word) {
$scope.currentDetail = word;
};
});
http://jsfiddle.net/HB7LU/20074/
$document.find in jqlite is limited to tag name only. You have to add jquery for anything more.
See what is suported in the docs.
you have all you need built into angular already, you don't need the Javascript at all.
see this plunker example
<table style="width:100%;">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td>
Name
</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="person in people">
<td>
<button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
<button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
</td>
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
</tr>
<tr ng-if="person.expanded" ng-repeat-end="">
<td colspan="3">{{person.details}}</td>
</tr>
</tbody>
</table>
I am getting the following error while i have no data using ng-repeat in Angular.js
Error:
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.6/ngRepeat/dupes?p0=user%20in%20objHodUserData&p1=string%3Al&p2=l
at Error (native)
at http://oditek.in/Gofasto/js/angularjs.js:6:416
at http://oditek.in/Gofasto/js/angularjs.js:279:39
at Object.fn (http://oditek.in/Gofasto/js/angularjs.js:129:128)
at n.$digest (http://oditek.in/Gofasto/js/angularjs.js:130:206)
at n.$apply (http://oditek.in/Gofasto/js/angularjs.js:133:236)
at g (http://oditek.in/Gofasto/js/angularjs.js:87:376)
at K (http://oditek.in/Gofasto/js/angularjs.js:91:448)
at XMLHttpRequest.z.onload (http://oditek.in/Gofasto/js/angularjs.js:92:462)
I am explaining my code below.
<tbody id="detailsstockid">
<tr ng-repeat="user in objHodUserData ">
<td>{{$index+1}}</td>
<td>{{user.user_name}}</td>
<td>{{user.email}}</td>
<td>{{user.mob_no}}</td>
<td>{{user.login_name}}</td>
<td ng-if="user.user_status==1">Enable</td>
<td ng-if="user.user_status==0">Disable</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editUserData(user.user_id)" >
</a>
</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteUserData(user.user_id);" >
</a>
</td>
</tr>
</tbody>
When the object objHodUserData has no data these type error is coming.I tried to resolve this by using track by $index. By using this error has gone but 4 blank rows are generating.Here i need when there is no data present no rows will generate without any error and when data will be there it will display.Please help me to resolve this error.
I had the same problem, and I solved it by wrapping all the <tbody> within a <div> element.
and inserting ng-show in this div element like that
<div ng-show="hasElements()">
and in your controller you have a $scope function to check if there is elements in the object like that:
$scope.hasElements = function(){
return objHodUserData.length ===0;
}
and that should work.
let me if it solved your problem.
Cheers.
Try using ng-if along with ng-repeat.It should be ng-if="objHodUserData.length !=0"
If you don't mind using lodash, then this is a handy utility library for your javascript, which can help with tasks like this.
var objHodUserDataWithoutBlanks = _.filter(objHodUserData, function(n) {
return n.user_name != "";
});
The above will filter out entries that have a blank username. Then your ng-repeat can instead repeat over this object without blanks: objHodUserDataWithoutBlanks.
Edit: Alternate method using only angularjs:
Add an angular filter:
myApp.filter('nonBlankOnly', function() {
return function( items) {
var filtered = [];
angular.forEach(items, function(item) {
if(item.user_name != "") {
filtered.push(item);
}
});
return filtered;
};
});
Then apply the filter in your controller:
function myCtrl($scope, $filter)
{
$scope.objHodUserDataWithoutBlanks = $filter('nonBlankOnly')(objHodUserData);
}
And repeat through filtered items:
<tr ng-repeat="user in objHodUserDataWithoutBlanks">
Maybe you can use de ng-show to check if there is an existing user, something like:
<tr ng-repeat="user in objHodUserData ">
<td ng-show="user">{{$index+1}}</td>
<td ng-show="user">{{user.user_name}}</td>
<td ng-show="user">{{user.email}}</td>
<td ng-show="user">{{user.mob_no}}</td>
<td ng-show="user">{{user.login_name}}</td>
or if you prefer to hide the entire row, put the ng-show on the <tr> element.
<tbody id="detailsstockid">
<tr ng-repeat="user in objHodUserData " ng-show="user">
<td>{{$index+1}}</td>
<td>{{user.user_name}}</td>
<td>{{user.email}}</td>
<td>{{user.mob_no}}</td>
<td>{{user.login_name}}</td>
<td ng-if="user.user_status==1">Enable</td>
<td ng-if="user.user_status==0">Disable</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editUserData(user.user_id)" >
</a>
</td>
<td>
<a ui-sref='hod.user'>
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteUserData(user.user_id);" >
</a>
</td>
</tr>
</tbody>
Im using this awesome angular material, now what im trying to do is when the angular checkbox 1 is click then all the input checkbox that has a class of "column_1" will be check, same as the angular checkbox 2 and 3, clicking in any of them will then checked the corresponding input checkbox that was bind for the clicked angular checkbox e.g if click checkbox2 then all the input checkbox that has a class of "column_2" will be check, click checkbox3 then all the input checkbox that has a class of "column_3" will be check. Any help, clues, ideas, recommendation and suggestion to achieve it?
here's my html
<div ng-app="j_app">
<div ng-controller="j_controller">
<md-checkbox ng-model="check">
</md-checkbox>
<table>
<thead>
<th><md-checkbox class="checkbox1"></md-checkbox></th>
<th><md-checkbox class="checkbox2"></md-checkbox></th>
<th><md-checkbox class="checkbox3"></md-checkbox></th>
</thead>
<tbody>
<tr class="row_1">
<td class="column_1"><md-checkbox></md-checkbox></td>
<td class="column_2"><md-checkbox></md-checkbox></td>
<td class="column_3"><md-checkbox></md-checkbox></td>
</tr>
<tr class="row_2">
<td class="column_1"><md-checkbox></md-checkbox></td>
<td class="column_2"><md-checkbox></md-checkbox></td>
<td class="column_3"><md-checkbox></md-checkbox></td>
</tr>
</table>
</div>
</div>
and my script (module and controller)
var app = angular.module('j_app', ['ngMaterial']);
app.controller('j_controller', function($scope) {
$scope.check = {
value1 : true,
value2 : false
};
});
Here is a plunker that looks to the behavior you want :
I basically dynamically created the checkboxes to have a better control on it.
<th ng-repeat="(column,columnindex) in [1,2,3]">
<md-checkbox ng-change="checkColumnCheckBoxes(columnindex,checkBoxesHeader[columnindex])"
ng-model="checkBoxesHeader[columnindex]" class="checkbox1">
</md-checkbox>
</th>
<tr class="row_{{$index}}" ng-repeat="(row,rowindex) in [1,2,3]">
<td class="column_{{$index}}"
ng-repeat="(column,columnindex) in [1,2,3]">
<md-checkbox ng-init="checkBoxes[rowindex][columnindex] = false"
ng-model="checkBoxes[rowindex][columnindex]">
</md-checkbox>
</td>
</tr>
You can replace "[1,2,3]" with any other counter.
My js "checkColumnCheckBoxes" function :
$scope.checkColumnCheckBoxes = function(index,value){
angular.forEach($scope.checkBoxes, function(checkBox,key){
$scope.checkBoxes[key][index] = value;
})
}
I'm pretty sure you will have to rework this to your "real" needs (as you don't need a table that display only checkboxes) but it could be a solid start. If you need some help to adapt it to your needs feel free to ask.
Hope it helped.
Since your HTML is pre-generated here is how it should look like :
<table>
<thead>
<th><md-checkbox ng-change="checkColumnCheckBoxes(0,checkBoxesHeader[0])" class="checkbox1" ng-model="checkBoxesHeader[0]"></md-checkbox></th>
<th><md-checkbox ng-change="checkColumnCheckBoxes(1,checkBoxesHeader[1])" class="checkbox2" ng-model="checkBoxesHeader[1]"></md-checkbox></th>
<th><md-checkbox ng-change="checkColumnCheckBoxes(2,checkBoxesHeader[2])" class="checkbox3" ng-model="checkBoxesHeader[2]"></md-checkbox></th>
<tbody>
<tr class="row_1">
<td class="column_1"><md-checkbox ng-init="checkBoxes[0][0] = false" ng-model="checkBoxes[0][0]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[1][0] = false" ng-model="checkBoxes[0][1]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[2][0] = false" ng-model="checkBoxes[0][2]"></md-checkbox></td>
</tr>
<tr class="row_2">
<td class="column_1"><md-checkbox ng-init="checkBoxes[0][1] = false" ng-model="checkBoxes[1][0]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[1][1] = false" ng-model="checkBoxes[1][1]"></md-checkbox></td>
<td class="column_1"><md-checkbox ng-init="checkBoxes[2][1] = false" ng-model="checkBoxes[1][2]"></md-checkbox></td>
</tr>
</table>
I also updated the plunker to match the exemple.
My code:
<script>
function customersController($scope, $http) {
$http.get("https://tic.com/testingservice/HttpService.svc/operator/Var1/Var2")
.success(function (response) { $scope.names = response; });
}
</script>
<table class="plansbox" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolder1_FULLTALKTIME" style="border-width:0px;width:100%;border-collapse:collapse;">
<tbody><tr class="rechargeplansheader">
<th scope="col">AMOUNT</th><th scope="col">TALKTIME</th><th scope="col">VALIDITY</th><th scope="col">DESCRIPTION</th>
</tr><tr class="GridRow" ng-repeat="x in names | filter: { plantype: 'TopUp' }" onclick="label1('220');" style="font-family:Verdana;cursor: pointer; cursor: hand;">
<td style="width:10%;">
<span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lblAmount" style="font-weight:bold;">{{ x.Amount }}</span>
</td><td style="width:10%;">
<span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lbltalktime" style="font-weight:bold;">{{x.Talktime }}</span>
</td><td style="width:10%;">
<span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lblvalidity" style="font-weight:bold;">{{ x.Validity }}</span>
</td><td style="width:70%;">
<span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lbldescription">{{ x.Description}}</span>
</td>
</tr>
</tbody></table>
As you can see I am able to get the data, check if the returned data is null, but do to show another div in the null case.
Please help me I am new to angularjs.
You could simply use ng-if="!names", also for more better you maintain a flag which will give you information about data fetching ajax done or not. & that could be very useful while No data found div
Controller
var customersController($scope, $http) {
$scope.dataLoaded = false; //data loading done or not
$http.get("https://tic.com/testingservice/HttpService.svc/operator/Var1/Var2")
.success(function(response) {
$scope.dataLoaded = true;
$scope.names = response;
});
}
app.controller('customersController', ['$scope', '$http', customersController]);
Markup
<table class="plansbox" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolder1_FULLTALKTIME" style="border-width:0px;width:100%;border-collapse:collapse;">
<thead>
<tr class="rechargeplansheader">
<th scope="col">AMOUNT</th>
<th scope="col">TALKTIME</th>
<th scope="col">VALIDITY</th>
<th scope="col">DESCRIPTION</th>
</tr>
</thead>
<tbody>
<tr ng-if="dataLoaded && (!names || names.length === 0)" colspan="4">
<td>No data found</td>
</tr>
<tr class="data-loading" ng-if="!dataLoaded" colspan="4">
<td>Data is loading</td>
</tr>
<tr ng-if="dataLoaded" class="GridRow" ng-repeat="x in names | filter: { plantype: 'TopUp' }" onclick="label1('220');" style="font-family:Verdana;cursor: pointer; cursor: hand;">
<td style="width:10%;">
<span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lblAmount" style="font-weight:bold;">{{ x.Amount }}</span>
</td>
<td style="width:10%;">
<span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lbltalktime" style="font-weight:bold;">{{x.Talktime }}</span>
</td>
<td style="width:10%;">
<span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lblvalidity" style="font-weight:bold;">{{ x.Validity }}</span>
</td>
<td style="width:70%;">
<span id="ctl00_ContentPlaceHolder1_FULLTALKTIME_ctl02_lbldescription">{{ x.Description}}</span>
</td>
</tr>
</tbody>
</table>
Working Plunkr
Update
Additionally you could do add one more flag which would give you information about ajax in addition with names you could use dataLoaded flag. While ajax is in progress set dataLoaded value to false, after completion of ajax set dataLoaded to true.
You could show or hide any div on your html by using ng-show, ng-hide or ng-if directive. Only you need to specify expression value in it, depends on expression value true/false it will show/hide that div element.
As in above example I used ng-if="dataLoaded && (!names || names.length === 0)" which evaluated the expression and will show that div only when ajax is completed & names array does have value or its length is Zero(0)