javascript - How to hide <td>s in angularjs in particular rows when using ng-repeat - Stack Overflow

admin管理员组

文章数量:1332881

I have a table and and many <td>s in first <tr> </tr> i am using ng-repeat

  <tr ng-repeat="receipt in $data">
   <td   data-title="voucher number">
    <span>{{receipt.voucher_no}}</span> 
   </td>
    <td   data-title="voucher date" sortable="'voucher_date'" filter="{'voucher_date': 'text' }">
    <span>{{receipt.voucher_date}}</span> 
   </td>
    <td   data-title="voucher Amount">
    <span>{{receipt.voucher_amount}}</span> 
   </td> 
  </tr>  

i have also json data like

{
    "data": [
        {
            "voucher_no": "2",
            "voucher_amount": "100",
            "voucher_date": "2014-05-04",
      },
        {
            "voucher_no": "3",
            "voucher_amount": "1000000",
            "voucher_date": "2014-02-05",
        },
        {
            "voucher_no": "4",
            "voucher_amount": "50000",
            "voucher_date": "2014-02-05",
        },
        .
        .
        .
        .
        {
            "total": 1360100
        }
    ]
}

please note that for final data there is only one field 'total'.

so for all the row i want to print 3 <td>s except the in final row.

I have a table and and many <td>s in first <tr> </tr> i am using ng-repeat

  <tr ng-repeat="receipt in $data">
   <td   data-title="voucher number">
    <span>{{receipt.voucher_no}}</span> 
   </td>
    <td   data-title="voucher date" sortable="'voucher_date'" filter="{'voucher_date': 'text' }">
    <span>{{receipt.voucher_date}}</span> 
   </td>
    <td   data-title="voucher Amount">
    <span>{{receipt.voucher_amount}}</span> 
   </td> 
  </tr>  

i have also json data like

{
    "data": [
        {
            "voucher_no": "2",
            "voucher_amount": "100",
            "voucher_date": "2014-05-04",
      },
        {
            "voucher_no": "3",
            "voucher_amount": "1000000",
            "voucher_date": "2014-02-05",
        },
        {
            "voucher_no": "4",
            "voucher_amount": "50000",
            "voucher_date": "2014-02-05",
        },
        .
        .
        .
        .
        {
            "total": 1360100
        }
    ]
}

please note that for final data there is only one field 'total'.

so for all the row i want to print 3 <td>s except the in final row.

• javascript
• angularjs
• angularjs-directive
• angularjs-ng-repeat

Share Improve this question Follow edited May 22, 2014 at 9:32 Nisham Mahsin asked May 22, 2014 at 8:38 Nisham MahsinNisham Mahsin 1,39955 gold badges1919 silver badges4444 bronze badges 3

• What do you want that filter to do? At the moment it will show only the voucher_date columns which contain the word 'text'. – Catalin MUNTEANU Commented May 22, 2014 at 9:39
• i want all td from a particular date. i donno am using the propr way – Nisham Mahsin Commented May 22, 2014 at 9:49
• Well using the filter property on the td will only hide that td. I guess you need to hide the entire row if the date is not valid. I've updated my answer with a valid filter for this case. – Catalin MUNTEANU Commented May 22, 2014 at 9:54

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

<tr ng-repeat="receipt in $data | filter:{voucher_date: '2014-05-04'}">
    <!-- Voucher No -->
    <td ng-if="!$last"
        data-title="voucher number">
        <span>{{receipt.voucher_no}}</span> 
    </td>

    <!-- Voucher Date -->
    <td ng-if="!$last"
        data-title="voucher date">
         <span>{{receipt.voucher_date}}</span> 
    </td>

    <!-- Voucher Amount -->
    <td ng-if="!$last"
        data-title="voucher Amount">
        <span>{{receipt.voucher_amount}}</span> 
    </td>

    <!-- Total Column -->
    <td ng-if="$last"
        colspan="3"
        data-title="Total">
        <span>{{receipt.total}}</span> 
    </td>
</tr>

The above filter will only show the records for which the date is equal to the specified date.

If you want to show all the records between two dates you will need to specify a function as the filter: | filter:filter_between_date and in your controller you have to create that function:

$scope.from_date = '2014-05-04'; // 04 May
$scope.to_date = '2014-05-10'; // 10 May
$scope.filter_between_date = function(item) {
    var item_date = new Date(item.voucher_date).getTime();

    if(item_date >= (new Date($scope.from_date).getTime()) &&
        item_date <= (new Date($scope.to_date).getTime()) {
        return true;
    }

    return false;
};

Angular filter docs

Angular ngIf directive docs

Angular ngRepeat $last property

Use :

  <tr ng-repeat="receipt in $data">
   <td   data-title="voucher number" ng-hide="$index == $data.length - 1">
    <span>{{receipt.voucher_no}}</span> 
   </td>
    <td   data-title="voucher date" ng-hide="$index == $data.length - 1">
    <span>{{receipt.voucher_date}}</span> 
   </td>
    <td   data-title="voucher Amount">
    <span>{{receipt.voucher_amount}}</span> 
   </td> 
  </tr>  

The $index variable stores the position of the repeated element in the original list.

本文标签： javascriptHow to hide lttdgts in angularjs in particular rows when using ngrepeatStack Overflow