Angularjs隐藏表列

时间:2016-07-07 19:06:24

标签: javascript angularjs ng-show ng-hide

我再次使用此表并遇到问题。使用ng-repeat和ng-bind绑定数据的标准表。我有一个All / Open / Posted的下拉菜单。它将disabledToggle设置为True或False。所以我想要的是当它被设置为false时,隐藏接收日期列。反之,当它为True时,接收的日期可见。

我已将ng-hide放在标题上,它只删除了标题而不是列数据。我还把ng-hide放在桌子上。所有这一切都是将表数据移到一个单元格上。所以数据不能正确排列。

         <table id="tblItemList" class="table table-responsive table-hover table-striped" oci.fixed-header infinite-scroll="vm.scrollItems()" infinite-scroll-distance="1" infinite-scroll-parent="true">
            <thead>
              <tr>
                 <th class="cursorptr" style="width:15%">
                     <span>Invoice Date</span>
                 </th>
                 <th ng-hide="!order.disabledToggle">
                     <span>
                          <span>Received Date</span>
                     </span>
                 </th>
                 <th class="cursorptr" style="width:15%">
                     <span>
                          <span>Invoice number </span>
                     </span>
                  </th>
                  <th class="cursorptr" style="width:10%">
                     <span>
                          <span>Order Number</span>
                     </span>
                  </th>
                  <th style="width:6%">
                     <span>
                          <span>LInes </span>
                     </span>
                  </th>
                  <th style="width:10%">
                     <span>
                         </span>
                  </th>
                 <th style="width:10%">
                     <span>Tracking</span>
                  </th>
                  <th style="width:10%">
                     <span>Action</span>
                   </th>
                </tr>
              </thead>
             <tbody>
                <tr ng-repeat="order in vm.orders track by $index"  ng-dblclick="vm.EditInvoiceModal(order)" style="cursor:pointer" >                                            
                   <td ng-bind="(order.dtInvoiced | date:'MM/dd/yyyy' )"> </td> 
                   <td ng-bind="(order.dtReceived | date:'MM/dd/yyyy' )" ng-hide="!order.disabledToggle"></td>
                   <td ng-bind="order.invoiceNumber"></td>
                   <td ng-bind="order.invoiceItems.mdbsPoNumber"></td>
                   <td align="center" ng-bind="order.lines"></td>
                   <td ng-bind="(order.total | number:2)"></td>
                   <td align="center" ng-bind="order.carrier"></td>                                                
                   <td>
                       <a ng-click="vm.EditInvoiceModal(order)"><i class="fa fa-pencil fa-2x"></i></a>                                                    
                       <a ng-click="order.disabledToggle || vm.commitOrder(order)" ></a>

                  </tr>
               </tbody>

0 个答案:

没有答案