How to check array value is null in ng-repeat using Angular.js

Question

I need one help.I need to check if the array has no value and display one message there using Angular.js.I am explaining my code below.

  <table class="table table-bordered table-striped table-hover" id="dataTable">

<thead>
<tr>
<th>Sl. No</th>

<th>Date</th>
<th>
Info(Academic Year,Section,Subject,Semester)
</th>
<th>
Unit Name
</th>
<th>
Lecture Plan
 </th>
<th>Action</th>
</tr>
</thead>
<div ng-if="viewIncompletePlanData.length>0">
<tbody id="detailsstockid">
<tr ng-repeat="p in viewIncompletePlanData">
<td>{{$index+1}}</td>

<td>{{p.date}}</td>
<td>{{p.session}},{{p.section_name}},{{p.subject_name}},{{p.semester}}</td>
<td>{{p.unit_name}}</td>
<td>{{p.plan}}</td>
<td> 
<a >
<input type='button' class='btn btn-xs btn-success' value='Update' ng-click="">  
</a>
</td>
</tr>   
</tbody>
</div>
<div ng-if="viewIncompletePlanData.length==0">
<tr>
<center><p><b>No Record Matched</b></p></center>
</tr>
 </div>
</table>

In the above code i need when viewIncompletePlanData has no value it will display message there No record found Otherwise display the array result.Please help me.

Try this: <td ng-show='viewIncompletePlanData.length===0'>No record found</td> — Rayon
– Rayon, Commented Nov 30, 2015 at 8:50

Vivek · Accepted Answer · 2015-11-30 09:06:11Z

You can check the length of the array. If the length > 0 then show the records in table else if array is undefined or length === 0 then show No Record Found in the first row of table.

    <table>
        <tbody id="detailsstockid">
            <tr ng-repeat="p in viewIncompletePlanData" ng-if="viewIncompletePlanData.length>0">
                <td>{{$index+1}}</td>
                <td>{{p.date}}</td>
                <td>{{p.session}},{{p.section_name}},{{p.subject_name}},{{p.semester}}</td>
                <td>{{p.unit_name}}</td>
                <td>{{p.plan}}</td>
                <td>
                   <a>
                     <input type='button' class='btn btn-xs btn-success' value='Update' ng-click="">  
                   </a>

                </td>
            </tr>
            <tr ng-if="viewIncompletePlanData== null || viewIncompletePlanData.length === 0">
                <td>
                    No Record Found
                </td>
            </tr>
        </tbody>
    </table>

Anik Islam Abhi · Accepted Answer · 2015-11-30 09:14:51Z

0

You can do it by ng-if / ng-show / ng-hide

Try like this

<table class="table table-bordered table-striped table-hover" id="dataTable">
   <thead>
      <tr>
         <th>Sl. No</th>
         <th>Date</th>
         <th>Info(Academic Year,Section,Subject,Semester)</th>
         <th>Unit Name</th>
         <th>Lecture Plan</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody id="detailsstockid">
      <tr ng-repeat="p in viewIncompletePlanData" ng-if="viewIncompletePlanData.length>0">
         <td>{{$index+1}}</td>
         <td>{{p.date}}</td>
         <td>{{p.session}},{{p.section_name}},{{p.subject_name}},{{p.semester}}</td>
         <td>{{p.unit_name}}</td>
         <td>{{p.plan}}</td>
         <td>
            <a>
            <input type='button' class='btn btn-xs btn-success' value='Update' ng-click="">  
            </a>
         </td>
      </tr>
      <tr ng-if="viewIncompletePlanData.length==0">
         <td colspan="6">
            <center>
               <p><b>No Record Matched</b>
               </p>
            </center>
         </td>
      </tr>
   </tbody>
</table>

edited Nov 30, 2015 at 9:14

answered Nov 30, 2015 at 8:52

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

1 Comment

user5443928 Over a year ago

Yes,its coming but message is coming avobe the table.

Collectives™ on Stack Overflow

How to check array value is null in ng-repeat using Angular.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related