angularjs - 过滤以隐藏转发器

时间:2016-09-06 08:27:08

标签: angularjs angularjs-ng-repeat angularjs-filter angular-filters

我正在尝试编写一个小过滤器来隐藏我的转发器元素。

让我们说我的范围是:

$scope.test = [
    {id: 1,name: "Test number 1"},
    {id: 2,name: "Test number 2"},
    {id: 3,name: "Test number 3"},
    {id: 4,name: "Test number 4"},
    {id: 5,name: "Test number 5"},
    {id: 6,name: "Test number 6"},
    {id: 7,name: "Test number 7"},
    {id: 8,name: "Test number 8"},
    {id: 9,name: "Test number 9"},
    {id: 10,name: "Test number 10"} 
]

在我的转发器中,我正在做这样的事情:

<div ng-repeat="t in test| hide:[1,6]"></div>

我开始写我的过滤器,但我卡住了。这就是我到目前为止所做的:

filter('hideIDs', function() {
  newArray= [];

  function(zone, IDS) {
    var containsObject, newArray;
    containsObject = function(obj, list) {
      var i;
      i = void 0;
      i = 0;
      while (i < list.length) {
        if (list[i] === obj) {
          return true;
        }
        i++;
      }
      return false;
    };

    angular.forEach(IDS, function(hide) {
      return angular.forEach(test, function(t) {
        if (t.id === hide) {
          return
        } else {
          if (containsObject(t, newArray)) {
            return
          } else {
            newArray.push(t);
          }
        }
      });
    });
    return newArray;
  };
});

我想对过滤器做的是:

检查t.id是否应隐藏,如果是,return而不将其推送到newArray

我遇到的问题是:

  

隐藏的id在第一个循环中是1,然后是6被推送

     

在第二个循环hovewer上,隐藏的id为6,然后1被推送

无论如何,我最终还是把它们都拿走了。

建议?

你会以有效的角度方式实现这一目标吗?

非常感谢

1 个答案:

答案 0 :(得分:2)

这个怎么样? https://plnkr.co/edit/hPiOnq7jp4kIP6h8Ox1d?p=preview

<div ng-init="data = [{id: 1}, {id: 2}, {id: 3}, {id: 4}, {id: 5}]">
  <div ng-repeat="test in data | hideByIds:[2, 4]">
    {{ test.id }}
  </div>
</div>

您应该重复使用,{@ 3}}过滤器

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

app.filter( 'hideByIds', function( $filter ) {
  return function( input, ids ) {
    return $filter('filter')( input, function( it ) {
      return ids.indexOf( it.id ) == -1;
    } );
  }
} );

另一种方法是在范围上指定谓词函数,并将其简单地传递给模板中的过滤器。