Harsh sachdev Harsh sachdev - 25 days ago 6
AngularJS Question

Show message if no record found for search , anjularJS table

I want to show a message if "no record is found" for search result

<table class="table table-bordered table-striped" id="tbl1">
<tbody ng-repeat="d in newData | filter:searchText">
<tr ng-repeat="m in d.category ">
<th id="heading" ng-bind="m.name"></th>
</tr>
<tr>
<th></th>
<th id="proname" ng-repeat="p in d.procedure" ng-bind="p.procedures.name" repeat-end="onEnd($index)"></th>
</tr>
<tr ng-repeat="(index, hos) in myHospital | filter:searchHospital" id="hideRow">
<td id="hsname">{{hos.name}}</td>
<td id="price" class="edit" ng-repeat="pro in d.procedure" ng-bind-html="valueCheck(d._id,pro._id,hos._id)"></td>
<td id="enq" class="edit">Enquire Now</td>
</tr>
<tr ng-show="([d] | filter:searchText).length == 0"><td>No Result Found</td></tr>
</tbody>
</table>


And here is the DEMO for my table http://plnkr.co/edit/cD0rOgBwW5H8czsUXOaW?p=preview I tried something like
ng-if(object.length==0)
but it not work for me. Please suggest something

Answer

You can try with ng-repeat="d in fData=(newData | filter:searchText)" and then ng-show="fData.length == 0" as below.

I moved the No Records <tr> just below the <tbody> as it should be outside of the ng-repeat. You can change as you like. Click Run Code Snippet below to check this working.

// Code goes here
var app = angular.module('pnqApp', ['ngSanitize']);
        app.controller('procedureController', function ($scope, $http) {
            $scope.valueCheck = function (v1, v2, v3) {
                    var keepGoing1 = true;
                    var keepGoing2 = true;
                    var keepGoing3 = true;
                    $scope.res = undefined;
                    angular.forEach($scope.newData, function (item) {
                        if (keepGoing1) {
                            if (item._id == v1) {
                                $scope.arr1 = item;
                                keepGoing1 = false;
                                angular.forEach($scope.arr1.procedure, function (item) {
                                    if (keepGoing2) {
                                        if (item._id == v2) {
                                            $scope.arr2 = item;
                                            keepGoing2 = false;
                                            //console.log('apple',item);
                                            angular.forEach($scope.arr2.hospital, function (item) {
                                                if (keepGoing3) {
                                                    if (item.hospitalId == v3) {
                                                        keepGoing3 = false;
                                                        $scope.res = item.amountinDoller;
                                                        //console.log('orange',$scope.res);
                                                    }
                                                }
                                            });
                                        }
                                    }
                                });
                            }
                        }
                    });
                    if ($scope.res != undefined) return $scope.res;
                    else return 'NULL';
                }
                
                //logic to highlight background colod of TD
                
                $(document).ready(function(){
                  $('.edit').each(function(){
                      $(this).find('b').css('background-color','red');
                  });
                });
                
              
                
                //api for get hospital details
                $scope.myHospital = [
    {
      "_id": "57aafcce5cf10e3c0faf9e04",
      "name": "session hospital"
    },
    {
      "_id": "57ac1ef1d1942e6979ce7dce",
      "name": "test hospital"
    },
    {
      "_id": "57ac64615f280eea7e2f227b",
      "name": "my new hospital"
    }
  ]

                $scope.newData =[
    {
      "_id": "57e61f768c37a870698f3273",
      "procedure": [
        {
          "_id": "57ecc1917c3c54a049545cc0",
          "hospital": [
            {
              "_id": "580b2b2b333272f801b0c30e",
              "procedureId": "57ecc1917c3c54a049545cc0",
              "amountinINR": 1347,
              "amountinDoller": "<b>110</b>",
              "hospitalId": "57aafcce5cf10e3c0faf9e04",
              "categoryId": "57e61f768c37a870698f3273",
              "__v": 0
            },
            {
              "_id": "580b3a37333272f801b0c314",
              "procedureId": "57ecc1917c3c54a049545cc0",
              "amountinINR": 5764,
              "amountinDoller": 643,
              "hospitalId": "57ac1ef1d1942e6979ce7dce",
              "categoryId": "57e61f768c37a870698f3273",
              "__v": 0
            },
            {
              "_id": "580f3b08333272f801b0c319",
              "procedureId": "57ecc1917c3c54a049545cc0",
              "amountinINR": 954,
              "amountinDoller": "<b>2467</b>",
              "hospitalId": "57ac64615f280eea7e2f227b",
              "categoryId": "57e61f768c37a870698f3273",
              "__v": 0
            }
          ],
          "procedures": {
            "_id": "57ecc1917c3c54a049545cc0",
            "name": "test twe",
            "categoryId": "57e61f768c37a870698f3273",
            "createdAt": "2016-09-29T07:24:01.218Z",
            "__v": 0
          }
        },
        {
          "_id": "57e8f944aaf4b58718ae2862",
          "hospital": [
            {
              "_id": "580b2a5d333272f801b0c304",
              "procedureId": "57e8f944aaf4b58718ae2862",
              "amountinINR": 1102,
              "amountinDoller": 11025,
              "hospitalId": "57ac1ef1d1942e6979ce7dce",
              "categoryId": "57e61f768c37a870698f3273",
              "__v": 0
            },
            {
              "_id": "580b2b26333272f801b0c30d",
              "procedureId": "57e8f944aaf4b58718ae2862",
              "amountinINR": 422,
              "amountinDoller": 4632,
              "hospitalId": "57aafcce5cf10e3c0faf9e04",
              "categoryId": "57e61f768c37a870698f3273",
              "__v": 0
            }
          ],
          "procedures": {
            "_id": "57e8f944aaf4b58718ae2862",
            "name": "pro two",
            "description": "asbjdka",
            "categoryId": "57e61f768c37a870698f3273",
            "createdAt": "2016-09-26T10:32:36.659Z",
            "__v": 0
          }
        },
        {
          "_id": "57e8f882aaf4b58718ae2860",
          "hospital": [
            {
              "_id": "580b2a54333272f801b0c303",
              "procedureId": "57e8f882aaf4b58718ae2860",
              "amountinINR": 1101,
              "amountinDoller": "<b>11015</b>",
              "hospitalId": "57ac1ef1d1942e6979ce7dce",
              "categoryId": "57e61f768c37a870698f3273",
              "__v": 0
            },
            {
              "_id": "580b2b1c333272f801b0c30c",
              "procedureId": "57e8f882aaf4b58718ae2860",
              "amountinINR": 234,
              "amountinDoller": 2341,
              "hospitalId": "57aafcce5cf10e3c0faf9e04",
              "categoryId": "57e61f768c37a870698f3273",
              "__v": 0
            },
            {
              "_id": "580f3b01333272f801b0c318",
              "procedureId": "57e8f882aaf4b58718ae2860",
              "amountinINR": 864,
              "amountinDoller": 3682,
              "hospitalId": "57ac64615f280eea7e2f227b",
              "categoryId": "57e61f768c37a870698f3273",
              "__v": 0
            }
          ],
          "procedures": {
            "_id": "57e8f882aaf4b58718ae2860",
            "name": "test one",
            "description": "desc for test one",
            "categoryId": "57e61f768c37a870698f3273",
            "createdAt": "2016-09-26T10:29:22.946Z",
            "__v": 0
          }
        }
      ],
      "category": [
        {
          "_id": "57e61f768c37a870698f3273",
          "name": "my first",
          "createdAt": "2016-09-24T06:38:46.011Z",
          "__v": 0
        }
      ]
    },
    {
      "_id": "57e62eb18c37a870698f3274",
      "procedure": [
        {
          "_id": "57ef98c77de3a0e158bfefaf",
          "hospital": [
            {
              "_id": "580b2a9c333272f801b0c307",
              "procedureId": "57ef98c77de3a0e158bfefaf",
              "amountinINR": 2102,
              "amountinDoller": "<b>21025</b>",
              "hospitalId": "57ac1ef1d1942e6979ce7dce",
              "categoryId": "57e62eb18c37a870698f3274",
              "__v": 0
            },
            {
              "_id": "580b2b38333272f801b0c310",
              "procedureId": "57ef98c77de3a0e158bfefaf",
              "amountinINR": 797,
              "amountinDoller": 977,
              "hospitalId": "57aafcce5cf10e3c0faf9e04",
              "categoryId": "57e62eb18c37a870698f3274",
              "__v": 0
            }
          ],
          "procedures": {
            "_id": "57ef98c77de3a0e158bfefaf",
            "name": "two two",
            "categoryId": "57e62eb18c37a870698f3274",
            "createdAt": "2016-10-01T11:06:47.108Z",
            "__v": 0
          }
        },
        {
          "_id": "57ef98bd7de3a0e158bfefae",
          "hospital": [
            {
              "_id": "580b2a8e333272f801b0c306",
              "procedureId": "57ef98bd7de3a0e158bfefae",
              "amountinINR": 2101,
              "amountinDoller": 21015,
              "hospitalId": "57ac1ef1d1942e6979ce7dce",
              "categoryId": "57e62eb18c37a870698f3274",
              "__v": 0
            },
            {
              "_id": "580b2b33333272f801b0c30f",
              "procedureId": "57ef98bd7de3a0e158bfefae",
              "amountinINR": 575,
              "amountinDoller": 574,
              "hospitalId": "57aafcce5cf10e3c0faf9e04",
              "categoryId": "57e62eb18c37a870698f3274",
              "__v": 0
            }
          ],
          "procedures": {
            "_id": "57ef98bd7de3a0e158bfefae",
            "name": "cat two pro one",
            "categoryId": "57e62eb18c37a870698f3274",
            "createdAt": "2016-10-01T11:06:37.069Z",
            "__v": 0
          }
        }
      ],
      "category": [
        {
          "_id": "57e62eb18c37a870698f3274",
          "name": "ctg two",
          "createdAt": "2016-09-24T07:43:45.261Z",
          "__v": 0
        }
      ]
    },
    {
      "_id": "57efa0e67de3a0e158bfefb5",
      "procedure": [
        {
          "_id": "57efa0fb7de3a0e158bfefb7",
          "hospital": [
            {
              "_id": "580b2ae2333272f801b0c30a",
              "procedureId": "57efa0fb7de3a0e158bfefb7",
              "amountinINR": 3201,
              "amountinDoller": "<b>32015</b>",
              "hospitalId": "57ac1ef1d1942e6979ce7dce",
              "categoryId": "57efa0e67de3a0e158bfefb5",
              "__v": 0
            },
            {
              "_id": "580b2b46333272f801b0c312",
              "procedureId": "57efa0fb7de3a0e158bfefb7",
              "amountinINR": 6794,
              "amountinDoller": 367,
              "hospitalId": "57aafcce5cf10e3c0faf9e04",
              "categoryId": "57efa0e67de3a0e158bfefb5",
              "__v": 0
            }
          ],
          "procedures": {
            "_id": "57efa0fb7de3a0e158bfefb7",
            "name": "nose",
            "categoryId": "57efa0e67de3a0e158bfefb5",
            "createdAt": "2016-10-01T11:41:47.038Z",
            "__v": 0
          }
        },
        {
          "_id": "57efa0f57de3a0e158bfefb6",
          "hospital": [
            {
              "_id": "580b2acf333272f801b0c309",
              "procedureId": "57efa0f57de3a0e158bfefb6",
              "amountinINR": 3101,
              "amountinDoller": 31015,
              "hospitalId": "57ac1ef1d1942e6979ce7dce",
              "categoryId": "57efa0e67de3a0e158bfefb5",
              "__v": 0
            },
            {
              "_id": "580b2b41333272f801b0c311",
              "procedureId": "57efa0f57de3a0e158bfefb6",
              "amountinINR": 472,
              "amountinDoller": 7693,
              "hospitalId": "57aafcce5cf10e3c0faf9e04",
              "categoryId": "57efa0e67de3a0e158bfefb5",
              "__v": 0
            }
          ],
          "procedures": {
            "_id": "57efa0f57de3a0e158bfefb6",
            "name": "ear",
            "categoryId": "57efa0e67de3a0e158bfefb5",
            "createdAt": "2016-10-01T11:41:41.963Z",
            "__v": 0
          }
        },
        {
          "_id": "57efa0ff7de3a0e158bfefb8",
          "hospital": [
            {
              "_id": "580b2af1333272f801b0c30b",
              "procedureId": "57efa0ff7de3a0e158bfefb8",
              "amountinINR": 3301,
              "amountinDoller": 33015,
              "hospitalId": "57ac1ef1d1942e6979ce7dce",
              "categoryId": "57efa0e67de3a0e158bfefb5",
              "__v": 0
            },
            {
              "_id": "580b2b50333272f801b0c313",
              "procedureId": "57efa0ff7de3a0e158bfefb8",
              "amountinINR": 678,
              "amountinDoller": 247,
              "hospitalId": "57aafcce5cf10e3c0faf9e04",
              "categoryId": "57efa0e67de3a0e158bfefb5",
              "__v": 0
            }
          ],
          "procedures": {
            "_id": "57efa0ff7de3a0e158bfefb8",
            "name": "eye",
            "categoryId": "57efa0e67de3a0e158bfefb5",
            "createdAt": "2016-10-01T11:41:51.850Z",
            "__v": 0
          }
        }
      ],
      "category": [
        {
          "_id": "57efa0e67de3a0e158bfefb5",
          "name": "ent",
          "createdAt": "2016-10-01T11:41:26.490Z",
          "__v": 0
        }
      ]
    }
  ];
         
          
        });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.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.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.8/angular-sanitize.min.js"></script>
<div class="container" ng-app="pnqApp" ng-controller="procedureController">
        <form class="form">
            <div class="form-group">
                <div class="row">
                    <div class="form-group col-sm-6 col-md-6">
                        <div class="input-group" style="float:left;">
                            <div class="input-group-addon"><i class="icon icon_search"></i></div>
                            <input type="text" class="form-control" placeholder="enter column name" ng-model="searchText"> </div>
                    </div>
                    <div class="form-group col-sm-6 col-md-6">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="icon icon_search"></i></div>
                            <input type="text" class="form-control" placeholder="enter row name" ng-model="searchHospital"> </div>
                    </div>
                </div>
            </div>
        </form>
        <table class="table table-bordered table-striped" id="tbl1">
            <tbody ng-repeat="d in fData=(newData | filter:searchText)">
                <tr ng-repeat="m in d.category ">
                    <th id="heading" ng-bind="m.name"></th>
                </tr>
                <tr>
                    <th></th>
                    <th id="proname" ng-repeat="p in d.procedure" ng-bind="p.procedures.name" repeat-end="onEnd($index)"></th>
                </tr>
                <tr ng-repeat="(index, hos) in myHospital | filter:searchHospital " id="hideRow" class="ctest">
                    <td id="hsname">{{hos.name}}</td>
                    <td id="price" class="edit" ng-repeat="pro in d.procedure" ng-bind-html="valueCheck(d._id,pro._id,hos._id)"></td>
                </tr>
            </tbody>
                <tr ng-if="fData.length===0"><td>No Record</td></tr>
        </table>
    </div>

Comments