angularJS filter expression in ng-repeat

梦想与她 提交于 2019-12-07 04:56:59

问题


I would like to know what is the most elegant and simple way to implement this. I need to add a filter expression for a ng-repeat that would filter 2 conditions from one property.

In this example http://plnkr.co/edit/OMQxXvSjtuudMRGE4eZ8?p=preview

  • If you enter A, it would display checkbox for A,
  • enter B - display checkbox for B.

But I want to display the specified checkboxes plus anything with empty condition. There is no condition for C, so:

  • if you enter A, I want to display both A and C checkboxes,
  • enter B, I want to display both B and C checkboxes.

回答1:


I would create custom filter like:

app.filter('myfilter', function() {
   return function( items, condition) {
    var filtered = [];

    if(condition === undefined || condition === ''){
      return items;
    }

    angular.forEach(items, function(item) {          
       if(condition === item.condition ||  item.condition === ''){
         filtered.push(item);
       }
    });

    return filtered;
  };
});

and usage:

<span ng-repeat="charge in charges  |  myfilter:level.condition">

See Demo in Plunker

It looks pretty elegant and clear.

Hope it will help




回答2:


I think you can do this pretty easily with just a filter expression function on your scope like this;

$scope.filterExpression = function(charge) {
  return (!$scope.level || !charge.condition || 
          ($scope.level.condition.toUpperCase() === charge.condition.toUpperCase()));
}

and call it like this;

<span ng-repeat="charge in charges | filter:filterExpression">

plunkr (corrected)




回答3:


you can use : data-ng-repeat="charge in charges | filter:searchText" data-ng-if="filter = searchText.Name"




回答4:


Use two ng-repeats, one after another:

1st : Filter on anything that has checkbox checked AND has a condition

2nd : Filter on things that don't have conditions



来源:https://stackoverflow.com/questions/22621425/angularjs-filter-expression-in-ng-repeat

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!