Question

我无法使用此功能，我正在尝试在我选择的复选框上创建自定义过滤器。这是我的代码：

HTML：

<div ng-controller="AppCtrl">
<label class="item-input-wrapper">
  <input type="text" placeholder="Search" ng-model="searchTerm">
</label>
<div ng-repeat="l in letter">
<input ng-model="letter" type="checkbox" ng-checked="exists(l,selected)" ng-click="toggle(l, selected)">Letter {{l}}
</div>
  <div ng-repeat="name in names | filter: searchTerm">
      <p>
      {{name}}
      </p>
  </div>
  <pre ng-bind="selected | json"></pre>
</div>

JS：

var app = angular.module('starter', []);

app.controller('AppCtrl', function ($scope, $http) {
$scope.searchTerm = '';
$scope.names = ['Jimmy','Farris','Lance', 'Joaquin', 'Henry'];
 $scope.letter = ['L','E','Y', 'H', 'U'];
$scope.selected = [];
$scope.toggle = function (item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) {
      list.splice(idx, 1);
    }
    else {
      list.push(item);
    }
  };

  $scope.exists = function (item, list) {
    return list.indexOf(item) > -1;
  };

});

app.filter('selectedLetter', function () {
// filter to check array of elements
return function (selected) {


   return selected;
   }
});

我希望我的ng-repeat看起来像这样：

<div ng-repeat="name in names | filter: searchTerm">
      <p>
      {{name | selectedLetter}}
      </p>
</div>

我尝试编写的自定义选定过滤器不会过滤我选择的复选框。因此，当我选择字母L时，我希望Lance出现等等。

再次，这是我的小提琴搜索工作，而不是自定义过滤器。

http://jsfiddle.net/7mcj04or/

Answer 1

抱歉，我没有意识到您曾试图通过过滤器进行搜索，并用过滤器替换了我用搜索功能取代的内容。我把原来的管子重新加入了。

你注意到有两种方法可以做到这一点，一种方法是使用你的$ scope方法，一种方法是通过一个过滤器。通过过滤器路径，您没有使用在控制器下面声明的空过滤器。那是我的困惑。这是更新后的代码：

JS：

var app = angular.module('starter', []);

app.controller('AppCtrl', function($scope, $http) {
  $scope.searchTerm = '';
  $scope.names = ['Jimmy', 'Farris', 'Lance', 'Joaquin', 'Henry'];
  $scope.letter = ['L', 'E', 'Y', 'H', 'U'];
  $scope.selected = [];
  $scope.toggle = function(item, list) {
    var idx = list.indexOf(item);
    if (idx > -1) {
      list.splice(idx, 1);
    } else {
      list.push(item);
    }
  };

  $scope.exists = function(item) {
    return item.indexOf(item) > -1;
  };

});

app.filter('selectedLetter', function() {
  // filter to check array of   // filter to check array of elements

  return function(items, letter) {

    return items.filter(function(item) {
      return (item.length && letter.join('').indexOf(item.charAt(0)) == -1);
    });
  }
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</head>

<body ng-app="starter">
  <div ng-controller="AppCtrl">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Search" ng-model="searchTerm">
    </label>
    <div ng-repeat="l in letter">
      <input ng-model="letter" type="checkbox" ng-checked="exists(l, selected)" ng-click="toggle(l, selected)">Letter {{l}}
    </div>
    <div ng-repeat="name in $names = (names | filter: searchTerm | selectedLetter:selected)">
      <p>
        {{name}}
      </p>
    </div>
    <pre ng-bind="selected | json"></pre>
  </div>

</body>

</html>

最后，我建议您选择其中一条路线，因为您可以通过管道过滤器。但是直接使用过滤器，你需要在输出之前过滤数组，这就是为什么我将变量设置为ng-repeat中的副本。希望这可以帮助！（如果复选框没有正确过滤，只需在过滤器中反转我的条件）

Answer 2

试试这个 http://jsfiddle.net/Iceman52489/k8r4qLge/4/

您错过了一个过滤器，并且使用了错误的语法进行过滤。

选择阵列上的自定义滤镜角度滤波

2 个答案: