用于分层数据模型的角度嵌套过滤器

时间:2013-08-28 01:55:40

标签: javascript angularjs

我有一个分层数据模型,包含产品线和子线,然后是子线的子线等。我想要做的是仅隔离特定线或子线的直接后代(儿子不是孙子)的子线。

这是我现有的数据模型:

items:[
  {
    "_id": "1",
    "description": "sth1",
    "name": "smname1",
    "level_type": "line",
    "ancestor": "",
    "descendant": "smname2"
   }
  },
  {
    "_id": "2",
    "description": "sth2",
    "name": "smname1",
    "level_type": "subline",
    "ancestor": "smname1",
    "descendant": ""
    }
  },
]

同样对于上面的例子,我想要完成的另一件事是获得所有产品系列的孩子。我试过但到目前为止没有工作的是:

控制器

$scope.prodClassIsALine = function(item) {
        return item.level_type=='line';
    };

    $scope.prodClassIsASubLineof = function(item) {
        return item.ancestor==$scope.prodClassIsALine.name;
};

悲剧性的提议只是为了告诉你我需要所有行的所有孩子,即所有具有祖先名称的项目的项目。

HTML

<div ng-repeat="item in items  | filter:prodClassIsALine:prodClassIsASubLineof"> 
  <p>{[{item.name}]}</p>
</div> 

这是我们在AngularJS中嵌套过滤器的方式吗?似乎过滤器在列表上进行迭代,这些列表是作为属性给出的,但是我还无法详细了解它们是如何工作的。请帮忙。

解决方案

在script.js

//product is my ng-module
//filter to get all product classes that are lines
product.filter('prodClassIsALine', function() {
    return function(input) {
      var out = [];
      for (var i = 0; i < input.length; i++) {
        if (input[i].level_type=='line') {
            out.push(input[i])
        };
      };
      return out;
    };
});

//filter to get all children of product classes that are lines
product.filter('prodClassLineChild', function() {
    return function(input) {
      var out = [];
      var out2 = [];
      for (var i = 0; i < input.length; i++) {
        if (input[i].level_type=='line') {
            out2.push(input[i])
        };
      };
      for (var i = 0; i < out2.length; i++) {
        for (var j = 0; j < input.length; j++) {
            if (input[j].ancestor==out2[i].name) {
                out.push(input[j])
            };
        };
      };
      return out;
    };
});

HTML

<div ng-repeat="item in items  | prodClassIsALine"> 
<!-- or <div ng-repeat="item in items  | prodClassLineChild"-->
  <p>{[{item.name}]}</p>
</div>

1 个答案:

答案 0 :(得分:4)

你是说这个吗?

<div ng-repeat="item in items  | filter1 | filter2"> 

这里有更多信息 http://docs.angularjs.org/guide/dev_guide.templates.filters.using_filters

编辑:

现在我知道你没有写过滤器而是范围功能,你需要这样的东西

myModule.filter('iif', function () {
    return function (input, trueValue, falseValue) {
        return input ? trueValue : falseValue;
    };
});

我的用法是class =“{{catalogItem.IS_FINAL | iif:'IsFinalCatalogItem':''}}”

应该是这样的

myModule.filter('prodClassIsALine', function() {
    return function(item) {
        return item.level_type=='line';
    };
});

P.S。在角度1.2中,他们添加了标准的iif语法