角度JS过滤器隐藏和显示行

Question

我想根据用户选择显示和隐藏行。但它不能正常工作。需要帮助网页代码

<tr ng-repeat="x in ListOrders |filter:Listfiltering">
     {{x}}
 <td><span ng-bind="x.order_id"></span></td>
    <td><span ng-bind="x.equipment_name"></span></td>
    <td><span ng-bind="x.Dept_Name"></span></td>
    <td><span ng-bind="x.assign_date_time"></span></td>
    <td><span ng-bind="x.emp_name"></span></td>
    <td><span ng-bind="x.task_type_name"></span></td>
    <td><span ng-bind="x.maintenance_type_name"></span></td>
    <td ng-show="x.order_status>0&&x.order_status<2"><span>Initiated </span></td>
    <td ng-show="x.order_status>1&&x.order_status<3"><span>Performed </span></td>
    <td ng-show="x.order_status>2"><span>Completed </span></td>
  </tr>

控制器代码

orderlist.filter('Listfiltering', function() {
 return function (x) {
    if(x.order_status==$scope.OrderStatus)
    {
    return true;
    }else{
        return false;
    }
  };
  });

Answer 1

尝试使用这个：

//controller file
$scope.filterFunc = function (x) {
  return x.order_status==$scope.OrderStatus;
};
//html file
<tr ng-repeat="x in ListOrders |filter:filterFunc">

Answer 2

你的过滤器应该这样写

orderlist.filter('Listfiltering', function() {
  return function(x, condition) {
    return x.filter(function(item) {
      return item.order_status === condition;
    });
  };
});

并在模板中使用它，如下所示：

<tr ng-repeat="x in ListOrders | Listfiltering: OrderStatus">

var orderlist = angular.module("app", []);
orderlist.controller("myCtrl", function($scope) {
  $scope.ListOrders = [{
    order_id: 1,
    order_status: 'x',
    Dept_Name: 'name1'
  }, {
    order_id: 2,
    order_status: 'x',
    Dept_Name: 'name2'
  }, {
    order_id: 3,
    order_status: 'xx',
    Dept_Name: 'name3'
  }];
});
orderlist.filter('Listfiltering', function() {
  return function(x, condition) {
    if (!condition || condition === '') return x;
    return x.filter(function(item) {
      return item.order_status === condition;
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <h2>input 'x' and 'xx' to see filter results</h2>
  <input type="text" ng-model="OrderStatus">
  <table>
    <tr ng-repeat="x in ListOrders | Listfiltering: OrderStatus">
      <td><span ng-bind="x.order_id"></span></td>
      <td><span ng-bind="x.Dept_Name"></span></td>
    </tr>
  </table>
</div>