When i click on page number it doesn't display the corresponding results.
Here is a sample of code.
<div class="col wrapper-sm w-md bg-auto dk r-r">
<div class="panel panel-default" ng-show="$parent.showPie === true;">
<div class="table-responsive">
<table class="table" ng-show="hashes[0]" id="placement">
<thead>
<th> Hash </th>
<th> MalwareFamily </th>
<th> Score </th>
<th> Counts </th>
</thead>
<tbody>
<tr dir-paginate="hash in hashes| itemsPerPage:20">
<td><a href="#/app/country/{{countryName}}/cCode/{{stateCode}}/hash/{{hash['hash']}}/inbox/info" >{{hash['hash']}} </a></td>
<td> {{hash['malFamily']}} </td>
<td> {{hash['malScore']}} </td>
<td> {{hash['hits']}} </td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<dir-pagination-controls></dir-pagination-controls>
</div>
</div>
Corresponding controller is where am populating data from services, service is giving right data:
function malPAge(test) {
crudSrv.getResults(rootURL.url.baseURL + "global/country/" + $scope.stateCode + "/attacks/malware/hashes/" + test + "/", function(data, status) {
ngProgress.complete();
$scope.hashes = data;
var m = "placement";
$location.hash(m);
$anchorScroll();
});
}
I fixed it using id concept. Below is my code how i fixed this issue.
<div class="col wrapper-sm w-md bg-auto dk r-r">
<div class="panel panel-default" ng-show="$parent.showPie === true;">
<div class="table-responsive">
<table class="table" ng-show="hashes[0]" id="placement">
<thead>
<th> Hash </th>
<th> MalwareFamily </th>
<th> Score </th>
<th> Counts </th>
</thead>
<tbody>
<tr dir-paginate="hash in hashes| itemsPerPage:20" pagination-id="hash">
<td><a href="#/app/country/{{countryName}}/cCode/{{stateCode}}/hash/{{hash['hash']}}/inbox/info" >{{hash['hash']}} </a></td>
<td> {{hash['malFamily']}} </td>
<td> {{hash['malScore']}} </td>
<td> {{hash['hits']}} </td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<dir-pagination-controls pagination-id="hash"></dir-pagination-controls>
</div>
</div>
Related
I have a table (parent) and one another table inside that table(child).
I want to update the cell value of parent table from child table.
<table id="example" class="table table-bordered table-striped mt-4 nowrap" style="width:100%">
<thead>
<tr class="bg-primary text-light">
<th></th>
<th>
#Html.DisplayName("Restaurant Name")
</th>
<th>
#Html.DisplayName("Delivery Date")
</th>
<th>
#Html.DisplayName("Status")
</th>
<th class="none">
#Html.DisplayName("Preferred Delivery Date")
</th>
<th class="none">
<b> #Html.DisplayName("Item List") </b>
</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td></td>
<td>
#Html.DisplayFor(modelItem => item.RestaurantName)
</td>
<td>
#String.Format("{0:dd/MM/yyyy}", item.DELIVERED_DATE)
#*#Html.DisplayFor(modelItem => item.DELIVERED_DATE.Value.ToString("dd/MM/yyyy"))*#
</td>
<td>
#if (item.STATUS == 1)
{
<span class="badge badge-secondary">Draft</span>
}
#if (item.STATUS == 2)
{
<span class="badge badge-warning">Pending confirmation</span>
}
#if (item.STATUS == 3)
{
<span class="badge badge-primary">Confirmed</span>
}
#if (item.STATUS == 4)
{
<span class="badge badge-suceess">Delivered</span>
}
</td>
<td>
: #String.Format("{0:dd/MM/yyyy}", item.PREFERRED_DELIVERY_DATE)
</td>
<td>
:
<table>
<thead>
<tr class="bg-primary text-light">
<th>
#Html.DisplayName("Item Name")
</th>
<th>
#Html.DisplayName("Quantity")
</th>
<th>
#Html.DisplayName("Price")
</th>
</tr>
</thead>
<tbody>
<tr>
#foreach (var test in item.OrderSupplierItems)
{
<tr>
<td>#Html.DisplayFor(modelItem => test.IngredientName)</td>
<td>#Html.DisplayFor(modelItem => test.QUANTITY)</td>
<td>#Html.DisplayFor(modelItem => test.PRICE)$</td>
</tr>
}
<tr>
<td colspan="2">Sum</td>
<td>#item.OrderSupplierItems.Sum(b => b.PRICE)$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;#item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
}
</tbody>
</table>
I want to change the status on ajax success request.
$("body").on("click", "#example TBODY .Confirm", function () {
if (confirm("Do you want to confirm this order?")) {
var row = $(this).closest("tr");
var orderSupplierId = $(this).attr('href').substr(12);
$.ajax({
type: "PUT",
url: "#System.Configuration.ConfigurationManager.AppSettings["ServiceUrl"]/api/OrderSupplier/" + orderSupplierId +"?status=3",
contentType: 'application/json', // <---add this
dataType: 'text',
success: function (response) {
//here i want to do this
},
error: function (xhr, textStatus, errorThrown) {
console.log(errorThrown);
}
});
}
I need to update the status field of parent table based on confirm changes button.
I need to replace the current text of status field of current table.
You can use closest('tr').find("td:eq(3)") this will refer to 4th column td in your table i.e : status column and use .html or .text to make changes there .
Demo Code :
$("body").on("click", ".Confirm", function() {
if (confirm("Do you want to confirm this order?")) {
var row = $(this); //declare this outside..ajax call
var orderSupplierId = $(this).attr('href').substr(12);
//ajaxcodes..
//success: function(response) {
//here i want to do this
row.closest('tr').find("td:eq(3)").html('<span class="badge badge-primary">Confirmed</span>')
//},
//other codes
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table id="example" class="table table-bordered table-striped mt-4 nowrap" style="width:100%">
<thead>
<tr class="bg-primary text-light">
<th></th>
<th>
Restaurant Name
</th>
<th>
Delivery Date
</th>
<th>
Status
</th>
<th class="none">
Preferred Delivery Date
</th>
<th class="none">
<b>Item List </b>
</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>
Somehtings..
</td>
<td>
02/02/202
</td>
<td>
<span class="badge badge-warning">Pending confirmation</span>
</td>
<td>
02/3/2020
</td>
<td>
<table>
<thead>
<tr class="bg-primary text-light">
<th>
Item Name
</th>
<th>
Quantity
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>somehting</td>
<td>abc</td>
<td>12$</td>
</tr>
<tr>
<td colspan="2">Sum</td>
<td>123$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;#item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
<tr>
<td></td>
<td>
Somehtings..
</td>
<td>
02/02/202
</td>
<td>
<span class="badge badge-success">Delivered</span>
</td>
<td>
02/3/2020
</td>
<td>
<table>
<thead>
<tr class="bg-primary text-light">
<th>
Item Name
</th>
<th>
Quantity
</th>
<th>
Price
</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>somehting</td>
<td>abc</td>
<td>12$</td>
</tr>
<tr>
<td colspan="2">Sum</td>
<td>123$</td>
</tr>
<tr>
</tbody>
</table>
</td>
<td>
<a class='Confirm btn btn-success' href='javascript:;#item.ID_ORDER_SUPPLIER'>CONFIRM</a>
<a class='btn btn-primary'>MAKE CHANGES</a>
</td>
</tr>
</tbody>
</table>
You can search back from the element you're in, which is the button, with .closest(). Then find the status field from there. Best would be to give the status a class or id. So:
$(this).closest('table').find('.status')
This is my table, of course with some text in it, and I want on a button click to hide it, and show some images. I also want to reverse the action on the same button click. How can I do that?
<div id="aspect" style="display:yes">
<table style="100%" id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p>
</td>
</tr>
</table>
</div>
you can start with jQuery .toggle() method
$("button").click(function(){
$("img").toggle();
});
this will work as you need
Have a look here: http://api.jquery.com/toggle/
Please have a look at this code sample. I have used jQuery 2.1.1
$(function() {
$('#toggler').click(function() {
$('#Table').toggle();
$('#imageblock').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aspect">
<div style="display:none;" id="imageblock">
<img src="http://lorempixel.com/400/200/" />
</div>
<table id="Table">
<tr>
<th id="textul" > </th>
<th id="textul4"> </th>
</tr>
<tr>
<td id="testul2and3" style="vertical-align:top"> </td>
<td style="vertical-align:top" id="textul6">
<p> <iframe></iframe> </p> </td>
</tr>
</table>
</div>
<button id="toggler">Toggle Image/Table</button>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead class="row col-md-3">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row col-md-3">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
I have this table, when i'm using the bootstrap grid system with ng-repeat the results are very strange..
I've tried to play with the grid system but it dosent seem that it helps..
You do not need to add the row col-md-3 classes to the table-body or the row class to the tr elements. Also if you are repeating the items your ng-repeat needs to be on the tr element, if it is on the tbody element you are going to have multiple unnecessary tbody elements.
Please see working example
If you just want a simple table:
<div ng-controller="TestController as vm">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.items">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
JS:
var myApp = angular.module('myApp',[])
.controller('TestController', ['$scope', function($scope) {
var self = this;
self.items = ['one', 'two', 'three', 'four'];
}])
If you do not need the table element you can use the bootstrap row and col-* classes
<div class="row">
<div class="col-sm-6">
<h1>Key</h1>
</div>
<div class="col-sm-6">
<h1>Value</h1>
</div>
</div>
<div class="row" ng-repeat="item in vm.items">
<div class="col-sm-6">
{{$index}}
</div>
<div class="col-sm-6">
{{item}}
</div>
</div>
Try remove the class="row .."
<div ng-controller="reportCtrl">
<table class="table table-hover">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
Remove the bootstrap classes row, col-md-6 in tbody ,use the below code..
for all medias, it will be resized
<div ng-controller="reportCtrl" class="table-responsive>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Key </th>
<th> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr>
<td>{{param.key}}</td>
<td>{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-controller="reportCtrl">
<table class="table table-hover">
<div class="row col-md-3">
<thead class="row">
<tr>
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</div>
</table>
I have made few changes, like covered the entire table into 3 divisions and then
dividing them further into 6-6 for ths and tds. Just see if it works.
You may try this code
By removing the col-md-3
and style the table with width:auto
<div ng-controller="reportCtrl">
<table class="table table-hover" style="width:auto">
<thead class="row ">
<tr class="row">
<th class="col-md-6">Key </th>
<th class="col-md-6"> Value</th>
</tr>
</thead>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
<tbody ng-repeat="param in params" class="row ">
<tr class="row">
<td class="col-md-6 info">{{param.key}}</td>
<td class="col-md-6 info">{{param.val}}</td>
</tr>
</tbody>
</table>
</div>
I want to drag n drop items from one table onto another table. So far this works. Now i want to highlight the cells from the table which i want to drop those items.
It should display the borders or cell background when i hover the element over it. I tried jquery drop, but can't get it to work, it throws me an uncaught error.
I can't get my head around this.
Below is my snippet so far.
/* Below is search for the Table Assignment Board */
$(function() {
$.expr[':'].containsIgnoreCase = function(n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};
$('#reservationManagerListTableNumberInput').keyup(function(e) {
clearTimeout($.data(this, 'timer'));
if (e.keyCode == 13)
search(true);
else
$(this).data('timer', setTimeout(search, 100));
});
});
function search(force) {
if (this.value == '') {
$('#table2 tbody tr').show();
return;
}
var word = $('#reservationManagerListTableNumberInput')[0].value;
var word_filter = $('#table2 tbody tr');
if ($.trim(word) != '')
word_filter = word_filter.filter(':containsIgnoreCase(' + word + ')');
$('#table2 tbody tr').hide();
word_filter.show();
}
/* Drag and Drop action from Table Reservation to Table Assignment Schedule */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("resElement").innerHTML = "Drop Reservation on table slot";
}
function allowDrop(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("resElement").innerHTML = "Reservation preassigned with table";
}
/* Below visual drop effect */
$(function() {
$("#dragtarget").draggable();
$("#droptarget").droppable({
classes: {
"ui-droppable-hover": "ui-state-hover"
},
drop: function(event, ui) {
$(this)
.addClass("ui-state-highlight")
.find("p")
.html("Dropped!");
}
});
#table2 th+th,
#table2 td+td,
#table2 th,
#table2 td {
border-left: 2px solid #F5F5F5;
border-bottom: 2px solid #F5F5F5;
font-size: 0.75vw;
}
#table1 th+th,
#table1 td+td,
#table1 th,
#table1 td {
border-left: 2px solid #F5F5F5;
border-bottom: 2px solid #F5F5F5;
font-size: 0.75vw;
}
.tableinfoTime {
Width: 60px;
}
.tableinfo {
Width: 52.3px;
}
.scheduleHeader {
Width: 52px;
}
.scheduleHeaderTop {
Width: 52.3px;
}
.scheduleHeaderText {
font-size: 0.6vw;
vertical-align: middle;
}
.reservationListHeaderText {
font-size: 0.6vw;
vertical-align: middle;
}
.reservationListItemText {
font-size: 0.75vw;
vertical-align: middle;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<!-- Below is Dining Schedule -->
<div class="container-fluid" id="main_container">
<!-- tables inside this DIV could have draggable content -->
<div class="row">
<!-- left container (table with subjects) -->
<div class="col-lg-4" style="background-color: none;" id="left">
<table class="table table-fixed table-sm">
<th>
Search by any criteria <span class="badge badge-default">3 letters minimum</span>
</th>
</table>
<input style="margin-top:0.5em" class="form-control" type="text" id="reservationManagerListInput" placeholder="Search for reservation.. ">
<table class="table table-fixed table-sm table-hover" style="margin-top:0.5em;">
<thead>
<tr>
<th>
<div class="reservationListHeaderText">
Res ID
</div>
</th>
<th>
<div class="reservationListHeaderText">
Table Type
</div>
</th>
<th>
<div class="reservationListHeaderText">
Time
</div>
</th>
<th>
<div class="reservationListHeaderText">
Pax
</div>
</th>
<th>
<div class="reservationListHeaderText">
Cabin
</div>
</th>
<th>
<div class="reservationListHeaderText">
Name
</div>
</th>
<th>
<div class="reservationListHeaderText">
Status
</div>
</th>
<th>
<div class="reservationListHeaderText">
SR
</div>
</th>
</tr>
</thead>
<tbody class="">
<tr>
<td>
<div class="droptarget reservationListItemText" ondrop="drop(event)" ondragover="allowDrop(event)">
<p ondragstart="dragStart(event)" draggable="true" id="dragtarget">
Drag me
</p>
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
<td>
<div class="reservationListItemText">
0
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- End left container -->
<div class="col-lg-8" style="background-color: none;">
<table class="table table-fixed table-sm">
<th>
<label>Table assignment Schedule</label>
</th>
<th>
<p class="reservationListItemText" id="resElement"></p>
</th>
</table>
<!-- right container -->
<div id="right">
<input style="margin-top:0.5em margin-bottom: 0.5em;" class="form-control" type="search" id="reservationManagerListTableNumberInput" placeholder="Search for any table or Reservation.. ">
<table class="table table-responsive table-sm table-hover" style="margin-top:0.5em;" id="table2">
<thead class="header">
<tr>
<!-- if checkbox is checked, clone reservation subjects to the whole table row -->
<th>
<div class="scheduleHeaderTop">
<input id="week" type="checkbox" title="Preassign Table by drag and drop Reservation in each slot" checked/>
<input id="report" type="checkbox" title="Show Assignment report" /></div>
</th>
<th>
<div class="scheduleHeaderTop">Ttl Tbl.</div>
</th>
<th>
<div class="scheduleHeaderTop">Ttl Bkg.</div>
</th>
<th>
<div class="scheduleHeaderTop">Ttl Pax</div>
</th>
<th>
<div class="tableinfoTime">11:00</div>
</th>
<th>
<div class="tableinfoTime">11:30</div>
</th>
<th>
<div class="tableinfoTime">12:00</div>
</th>
<th>
<div class="tableinfoTime">12:30</div>
</th>
<th>
<div class="tableinfoTime">13:00</div>
</th>
<th>
<div class="tableinfoTime">13:30</div>
</th>
<th>
<div class="tableinfoTime">14:00</div>
</th>
<th>
<div class="tableinfoTime">14:30</div>
</th>
<th>
<div class="tableinfoTime">17:00</div>
</th>
<th>
<div class="tableinfoTime">17:30</div>
</th>
<th>
<div class="tableinfoTime">18:00</div>
</th>
<th>
<div class="tableinfoTime">18:30</div>
</th>
<th>
<div class="tableinfoTime">19:00</div>
</th>
<th>
<div class="tableinfoTime">19:30</div>
</th>
<th>
<div class="tableinfoTime">20:00</div>
</th>
<th>
<div class="tableinfoTime">20:30</div>
</th>
<th>
<div class="tableinfoTime">21:00</div>
</th>
<th>
<div class="tableinfoTime">21:30</div>
</th>
<th>
<div class="tableinfoTime">22:00</div>
</th>
</tr>
</thead>
<tbody class="reservationManagerScrolltbody">
<tr>
<td colspan="24" class="reservationManagerTableType">
<table class="table table-responsive table-fixed table-sm waiterStationtableinfoTime">
<thead class="header" id="TableAssignmentSchedule_thead">
<tr>
<th>
<div class="scheduleHeaderText">Table Number</div>
</th>
<th>
<div class="scheduleHeaderText">Table Type</div>
</th>
<th>
<div class="scheduleHeaderText">Bookings Assigned</div>
</th>
<th>
<div class="scheduleHeaderText">Guest Assigned</div>
</th>
<th colspan="20" style="text-align:center;"> Waiterstation 1</th>
</tr>
</thead>
<tbody id="TableAssignmentSchedule_tbody">
<tr>
<td>
<div class="scheduleHeader">146</div>
</td>
<td>
<div class="scheduleHeader">2 TOP</div>
</td>
<td>
<div class="scheduleHeader">6</div>
</td>
<td>
<div class="scheduleHeader">16</div>
</td>
<td>
<div class="tableinfoTime"> </div>
</td>
<td>
<div class="tableinfoTime droptarget" ondrop="drop(event)" ondragover="allowDrop(event)" id="droptarget">here</div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
<td>
<div class="tableinfoTime"></div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- right container -->
</div>
<!-- drag container -->
</div>
<!-- main container -->
</div>
I am using ng-repeat to bind the data but there is an issue that there is an image in a data which I am showing in image column by using {{obj.Image}}
Here is my code
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
Sr. no.
</th>
<th>
Title
</th>
<th>
Image
</th>
<th>
Category
</th>
<th>
SubCategory
</th>
<th>
PostedOn
</th>
<th>
Created By
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="obj in PostedBlogList">
<td>{{$index+1}}</td>
<td><a ng-href="{{'//'+obj.PageUrl }}">{{obj.Title}}</a></td>
<td> <img style="width:90px"src="{{obj.Image}}" /></td>
<td>
{{obj.CategoryName}}
</td>
<td>
{{obj.SubCategoryName}}
</td>
<td>
{{obj.CreatedDate}}
</td>
<td>
<button class="btn btn-primary" type="submit" value="Activate">Activate</button>
</td>
<td>
<button class="btn btn-primary" type="submit" value="Activate">Activate</button>
</td>
</tr>
</tbody>
</table>
I want to display the default image <img src="~/images/mail.png" alt="">
in <td> <img style="width:90px"src="{{obj.Image}}" /></td>
when my object {{obj.Image}} is null.
How can i check the condition?
There are multiple ways to do that.
You can use two img tags and use ng-show to hide one of them depending on obj.image:
<img ng-show="obj.Image" src="{{obj.Image}}">
<img ng-show="!obj.Image" src="default">
You can also have a function in your controller which returns the proper url:
<img src="{{getImage(obj.Image)}}">
$scope.getImage(img) = function{
return img ? img : '~/images/mail.png';
};
You could call a controller a function to decide what the URL would be.
ng-href="{{ showImage(obj) }}"
Code
$scope.showImage = function(obj){
return obj.PageUrl ? '//'+ obj.PageUrl: '~/images/mail.png'
}