过滤器在状态 =“活动”时未按预期运行

Question

以下代码应根据所选状态显示用户列表， JSP 代码

<table>
    <thead>
      <tr>
        <th>Aggregate</th>
        <th>User id</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Phone Number</th>
        <th>Email</th>
        <th class="text-center">Status</th>
      </tr>
    </thead>

    <tbody >

        <tr>
            <td><input type="text" class="form-control" ng-model="search.agId" /></td>
            <td><input type="text" class="form-control" ng-model="search.id" /></td>
            <td><input type="text" class="form-control" ng-model="search.firstName" /></td>
            <td><input type="text" class="form-control" ng-model="search.lastName" /></td>
            <td><input type="text" class="form-control" ng-model="search.mobileNo" /></td>
            <td><input type="text" class="form-control" ng-model="search.emailId" /></td>
            <td>
                <select class="form-control" ng-model="search.status">
                    <option value=""> Select </option>
                    <option value="ACTIVE"> Active </option>
                    <option value="INACTIVE"> In Active </option>
                    <option value="B"> Blocked </option>
                </select>
            </td>
        </tr>


        <tr ng-repeat="userone in filtereddata = (users.data | filter:search)">
            <td>{{ userone.agId }}</td>
            <td>{{ userone.id }}</td>
            <td>{{ userone.firstName }}</td>
            <td>{{ userone.lastName }}</td>
            <td>{{ userone.mobileNo }}</td>
            <td>{{ userone.emailId }}</td>
            <td class="text-center" ng-switch on="userone.status">
                <span class="inac label label-success" ng-switch-when="ACTIVE">Active</span> 
                <span class="inac label label-danger" ng-switch-when="INACTIVE">In Active</span> 
                <span class="inac label label-danger" ng-switch-when="B">Blocked</span>
            </td>
        </tr>

    </tbody>
</table>

控制器 JS 代码

$scope.$watch('search', function (newVal, oldVal) {
            $scope.filtered = filterFilter($scope.users.data, newVal);

            console.log($scope.filtered);

            $scope.bigTotalItems = (typeof $scope.filtered == 'undefined' ) ? 0 : $scope.filtered.length;
            $scope.noOfPages = Math.ceil($scope.bigTotalItems/$scope.entryLimit);
            $scope.currentPage = 1;
        }, true);

它适用于 INACTIVE 和被阻止（即 B）用户但是 选择时 ACTIVE 显示所有处于 ACTIVE 和 INACTIVE 状态的用户

我在 Controller js 代码中给出了一个简单的console.log($scope.filtered) 所选活动时实际上它实际上返回到过滤数据内的活动和非活动成员。它适用于其他选择。

我应该如何解决这个问题？

如果需要任何其他数据，请告诉我

Answer 1

angular.module('test', []).controller('Test', Test);

function Test($scope, $filter) {
  $scope.data = [{
    name: 'apple',
    status: 'inactive'
  }, {
    name: 'banana',
    status: 'active'
  }, {
    name: 'grape',
    status: 'deleted'
  }, {
    name: 'orange',
    status: 'inactive'
  }, {
    name: 'pear',
    status: 'deleted'
  }, {
    name: 'watermelon',
    status: 'active'
  }]
  
  $scope.filter = function(actual, expected) {
    if (expected == '') return true;
    
    return angular.equals(actual, expected);
  }
  
  $scope.$watch('search', function(newVal) {
    $scope.filtered = $filter('filter')($scope.data, newVal, $scope.filter);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
  Search:
  <select ng-model="search">
    <option value="">Select</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
    <option value="deleted">Deleted</option>
  </select>
  <hr>
  <div ng-repeat="item in data | filter:search:filter">
    {{item.name}} - {{item.status}}
  </div>
  <hr>
  <div ng-repeat="item in filtered">
    {{item.name}} - {{item.status}}
  </div>
</div>

通过阅读API reference，您似乎可以通过在第三个参数中传递true 来强制执行严格比较。

<tr ng-repeat="userone in filtereddata = (users.data | filter:search:true)">

如果您需要控制器中的正确结果，您还需要传入第三个参数。

$scope.filtered = filterFilter($scope.users.data, newVal, $scope.filter);

编辑：要解决选择空过滤器时的空结果问题，我们需要使用自定义过滤器功能。更新代码。