Question

我需要为此范围创建自定义搜索过滤器。我尝试了默认的过滤功能，不起作用，因为我在HTML中显示状态为字符串，并且没有按照我想要的方式过滤。如果我在文本框中键入Normal，则没有任何反应，因为数据为0,1和2.如果我搜索2016/05/16格式的购买时间也无法搜索。

$scope.orderHistory = {[
    "purchaseTime": 1437536718345,
    "status": 1,
]};
app.filter('filterSearch', function () {
  //what to do here??
});


<input type="text" ng-model="searchReview">

<div dir-paginate="order in orderHistory|filterSearch:searchReview">
<ul>
 <li><p class="table-data2-h">{{ order.purchaseTime | date : 'yyyy/MM/dd'}} </p></li>
<li>
<span ng-if="order.status == 0 ">Stable</span>
<span ng-if="order.status == 1 ">Normal</span>
<span ng-if="order.status == 2 ">Serious</span>
</li>
</div>

Answer 1

首先，我在function上看到了一些错误，您可以在下面进行比较。

我建议您创建一个简单的filter来解析您的属性，相应地仅针对 initilization （对于每次解析时哪一个更好解析）调用自定义 filter，然后您可以使用普通 (function() { 'use strict'; angular .module('app', []) .constant('STATUS', { 0: 'Stable', 1: 'Normal', 2: 'Serious' }) .controller('MainCtrl', MainCtrl); MainCtrl.$inject = ['$scope', 'STATUS']; function MainCtrl($scope, STATUS) { $scope.orderHistory = [ { "purchaseTime": 1437536718345, "status": 1 }, { "purchaseTime": 1431236718345, "status": 0 }, { "purchaseTime": 1099536718345, "status": 2 }, { "purchaseTime": 1439744718345, "status": 1 } ]; function parseProperties() { $scope.orderHistory.map(function(order) { // You can do it with switch statement // switch (order.status) { // case 0: // order.status = 'Stable'; // break; // case 1: // order.status = 'Normal'; // break; // case 2: // order.status = 'Serious'; // break; // } // or using a constant that you can define above order.status = STATUS[order.status]; order.purchaseTime = new Date(order.purchaseTime).toLocaleDateString(); return order; }); } parseProperties(); } })();。

查看工作：

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <input type="text" placeholder="Search..." ng-model="searchReview">
  <div ng-repeat="order in orderHistory | filter: searchReview">
    <ul>
      <li>
        <p class="table-data2-h" ng-bind="order.purchaseTime"></p>
      </li>
      <li ng-bind="order.status"></li>
    </ul>
  </div>
</body>

</html>

{{1}}

我希望它有所帮助

角度自定义搜索过滤器

1 个答案: