Question

我有这样的重复：

<div ng-repeat="user in staff | profAndDr">

一个自定义过滤器，显示标题为＆＃34;博士＆＃34;和＆＃34;教授＆＃34;只有：

app.filter('profAndDr', function() {
return function(input) {
    var out = [];
    angular.forEach(input, function(title) {
        if (title.title === 'PROF.'||title.title==='DR.') {
            out.push(title)
        }
    })
return out;
}

我需要添加一个复选框，确实显示标题为＆＃34;教授。 Amaritos＆＃34;如果选中。所以，基本上我需要从ng-repeat中删除我的过滤器，如果选中的话。

链接到Codepen

谢谢！

Answer 1

您可以在不使用过滤器的情况下编写其他ng-repeat，但这是不好的做法。我建议你将true / false标志传递给过滤器，按原样返回input。

HTML 的

<div ng-app="staffApp">
    <div ng-controller="StaffListCtrl">
    <label for="amaritos">Show Amaritos</label>
    <input id="amaritos" type="checkbox" ng-model="showFlag">
    <hr />
    <div 
            ng-cloak 
            ng-repeat="user in staff | profAndDr:showFlag">
      {{user.title}} {{user.first}}
    </div>
  </div>
</div>

过滤

phonecatApp.filter('profAndDr', function() {
    return function(input) {
        var out = [];
        angular.forEach(input, function(title) {
            if (title.title === 'PROF.'||title.title==='DR.') {
                out.push(title)
            }
        })
    return out;
    }
});

Answer 2

您可以将变量传递到过滤器中，然后使用它来确定是否选中了复选框。

e.g。

<div ng-repeat="user in staff | profAndDr: isChecked">

然后

app.filter('profAndDr', function() {
    return function(input, isChecked) {
        var out = [];
        angular.forEach(input, function(title) {
            if (title.title === 'PROF.' || title.title==='DR.' || (isChecked && [othercondition])) {
                out.push(title)
            }
        })
    return out;
}

Answer 3

您可以将复选框的值作为参数传递给过滤器。如果您想要显示所有内容，只需返回原始输入。

app.filter('profAndDr', function() {
  return function(input, showAmaritos) {
    if (showAmaritos) {
      return input;
    }
    var out = [];
    angular.forEach(input, function(title) {
        if (title.title === 'PROF.'||title.title==='DR.') {
            out.push(title)
        }
    });
    return out;
  }
}

HTML

<input id="amaritos" ng-model="showAmaritos" type="checkbox">

<div ng-repeat="user in staff | profAndDr:showAmaritos">

请参阅improved codepen

Answer 4

更新了js

var phonecatApp = angular.module('staffApp', []);

"use strict";

 phonecatApp.controller('StaffListCtrl', ['$scope', '$filter', function         ($scope) {
 $scope.title=false;
 $scope.staff = [
{
  "first": "POZIK",
      "last": "GOLDSMITH",
      "title": "PROF."
},
{
  "first": "LOSHOK",
      "last": "GALIMIY",
      "title": "DR."
},
{
  "first": "SHMOK",
      "last": "GOLDSMITH",
      "title": "PROF. AMARITOS"
},

] }]）

phonecatApp.filter('profAndDr', function() {
return function(input,test) {
    var out = [];
    angular.forEach(input, function(title) {
    if(test == false){
        if (title.title === 'PROF.'||title.title==='DR.') {
            out.push(title)
        }

    }
     else if(test == true){
        if (title.title === 'PROF. AMARITOS') {
            out.push(title)
        }
      }
    })
return out;
}

}）;

并在你的HTML中

<input id="amaritos" type="checkbox" ng-model='title'>

Answer 5

您可以通过在ng-model属性中为变量赋值来拦截输入的值。然后，您可以根据输入值为过滤器添加条件以执行不同的操作。

http://codepen.io/anon/pen/oYmpvZ

希望这有帮助。

角度动态从ng-repeat中删除过滤器

5 个答案: