对选定数组的自定义过滤器角度过滤答案

【问题标题】：Custom Filter angular filtering on array selected对选定数组的自定义过滤器角度过滤
【发布时间】：2016-10-07 23:35:01
【问题描述】：

我无法让这个东西工作，我正在尝试在我选择的复选框上创建一个自定义过滤器。这是我的代码：

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/

【问题讨论】：

标签： javascript html angularjs filter

【解决方案1】：

抱歉，我没有意识到您曾尝试通过过滤器进行搜索，并用过滤器替换了我已替换的搜索功能。我添加了你原来的管道。

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

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 中的副本的原因。希望这可以帮助！（如果复选框没有正确过滤，只需在过滤器中反转我的条件）

【讨论】：

【解决方案2】：

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

您缺少过滤器并且您使用了错误的语法进行过滤。

【讨论】：

我不确定你在这里做了什么。我不能再搜索了。并且复选框无法正常工作。我希望显示名称并能够过滤复选框和搜索。这不是这样做的
查看过滤功能。反转布尔返回。我所做的是连接过滤器。您没有在 jsfiddle 中调用过滤器，并且您的过滤器有一个空白函数。