如何使用Angular.js检查ng-repeat中的数组值是否为null

时间:2015-11-30 08:48:36

标签: javascript arrays angularjs angularjs-ng-repeat

我需要一个帮助。我需要检查数组是否没有值,并使用Angular.js显示一条消息。我正在解释下面的代码。

  <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>

在上面的代码中我需要viewIncompletePlanData没有值时它会在那里显示消息No record found否则显示数组结果。请帮助我。

2 个答案:

答案 0 :(得分:1)

您可以检查阵列的长度。如果length > 0然后显示表中的记录,如果数组是undefinedlength === 0,则在表的第一行显示No Record Found

    <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>

答案 1 :(得分:0)

您可以通过 ng-if / ng-show / ng-hide

来实现

试试这个

<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>