Angular中的自定义过滤器

时间:2015-07-11 10:00:54

标签: javascript angularjs

我在自定义过滤器方面遇到了一些问题。我无法将其包含在我的项目中。首先我使用了一个过滤器:文本。我理解该数组是异步初始化并使用此自定义过滤器。但是当我包含这个过滤器时,我有问题($ injector:unpr)。抱歉我的英文。

<div ng-controller="ProductList as products">
      <form ng-submit="addProduct()">
        <input type="text" placeholder="Enter product" ng-model="productTitle">
        <button>Add</button>
      </form>
      <ul class="productList">
        <li ng-repeat="product in list track by $index | custom:search">
          {{product.title}}      
        </li>
      </ul>
       <input type="text" placeholder="Search" ng-model="search">
</div>

App就在这里

angular.module('lists', [])
  .controller('ProductList', function($scope) {
    $scope.list = [];
    $scope.addProduct = function() {
        $scope.list.push({title:$scope.productTitle});
        $scope.productTitle = "";
    }
  });

过滤器是

.filter('custom', function() {
  return function(input, search) {
    if (!input) return input;
    if (!search) return input;
    var expected = ('' + search).toLowerCase();
    var result = {};
    angular.forEach(input, function(value, key) {
      var actual = ('' + value).toLowerCase();
      if (actual.indexOf(expected) !== -1) {
        result[key] = value;
      }
    });
    return result;
  }
});

1 个答案:

答案 0 :(得分:0)

我检查了代码,问题似乎是应用过滤器的地方 小提琴:http://jsfiddle.net/pfgkna8k/2/。虽然我不知道你究竟在做什么。
请检查代码

<div ng-app="lists">
    <div ng-controller="ProductList as products">
          <form ng-submit="addProduct()">
              <input type="text" placeholder="Enter product" ng-model="productTitle" />
            <button>Add</button>
          </form>
          <ul class="productList">
            <li ng-repeat="product in list track by $index" ng-bind="filteredtitle = (product.title  | custom: searchBox)" ng-show="filteredtitle">

            </li>
          </ul>
        <input type="text" placeholder="Search" ng-model="searchBox" />
    </div>
</div>