Make HTML Table Last Row Text bold using AngularJS in ASP.Net MVC

Last Reply 11 days ago By dharmendr

Posted 11 days ago

Hi,

In below code

Convert JSON Date to Date format using JavaScript and AngularJS in ASP.Net MVC

I am going to do some changes

I want make last row of grid view records bold

Ex: if it has 100 records

i want make entire 100 row has bold

could you please help me

Posted 11 days ago Modified on 11 days ago

Hi mahesh213,

Apply CSS property to the last row.

Check this example. Now please take its reference and correct your code.

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View();
    }

    public JsonResult GetEmployees()
    {
        List<object> employees = new List<object>();
        employees.Add(new { Id = 1, Name = "John Hammond", Country = "United States" });
        employees.Add(new { Id = 2, Name = "Mudassar Khan", Country = "India" });
        employees.Add(new { Id = 3, Name = "Suzanne Mathews", Country = "Russia" });
        employees.Add(new { Id = 4, Name = "Robert Schidner", Country = "France" });
        return Json(employees, JsonRequestBehavior.AllowGet);
    }
}

View

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script type="text/javascript">
    var app = angular.module("MyApp", []);
    app.controller("MyController", ['$scope', '$http', function ($scope, $http) {
        $http.get("/Home/GetEmployees")
        .then(function (response) {
            for (var i = 0; i < response.data.length; i++) {
                if (i == response.data.length - 1) {
                    $scope.LastRecord = response.data[i];
                }
            }
            $scope.Employees = response.data;
        });
    } ]);
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table id="tblCustomers" class="table table-responsive">
        <thead>
            <tr>
                <th ng-repeat="(header, value) in Employees[0]">
                    {{header}}
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="row in Employees">
                <td ng-repeat="cell in row" ng-style="row == LastRecord &&{'font-weight': 'bold'}">
                    <span>{{cell}}</span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Screenshot

IdNameCountry
1 John Hammond United States
2 Mudassar Khan India
3 Suzanne Mathews Russia
4 Robert Schidner France