代码之家 › 专栏 › 技术社区 › Deblaton Jean-Philippe

基于选定值的ng选项筛选器

angularjs-ng-options angular-filters angularjs

Deblaton Jean-Philippe · 技术社区 · 10 年前

我必须写一个指令来编辑应用程序的标签。

每个区域性(例如:en-US)每个属性最多可以有4个标签,这些标签包含在一个表中:

 $scope.suffixes = ["DisplayName", "Description", "Hint", "Help"];


 <div class="clear" ng-repeat="label in labelModel | filter:cultureFilter">
      <select ng-options="suffix as suffix for suffix in suffixes | filter:suffixFilter(suffix, label.suffix)" ng-model="label.suffix" />

 </div>

下面是我的控制器功能:

    $scope.cultureFilter = function (label) {
        return (label.culture == $scope.labelState.culture);
    }

    $scope.suffixFilter = function (suffix, selectedValue) {

        //arguments are now : [undefined, "DisplayName"]

        return true; // :-(
    }

到目前为止,我已经能够根据文化过滤ng重复。

但是对于我的ng选项,我必须过滤已经使用的字符串。但我也必须保持当前值处于选中状态。我如何告诉我的过滤器某些值不应该被过滤,因为它是当前选定的值?

编辑

现在,我可以接收所选的值,但无法再接收后缀

1 回复 | 直到 10 年前

Josh 10 年前

你几乎可以使用过滤功能,但我认为在你的情况下 你真正需要的是一个自定义过滤器 。它们实际上很难写。

过滤器只是注册到 .filter() 帮手

你只需要一个包含你关心的参数的 .

//Outer factory function
function SuffixFilter(){

  //Inner function which is our filter
  return function(items, ignoredItem){
     var filteredItems = [];

     angular.forEach(items, function(item){
        //Your filtering logic may be more complex
        // than this. It's only an example
        if(item == someCriteria || item == ignoredItem){
           filteredItems.push(item);
        }
     });

     return filteredItems;
  }
}

angular.module('myModule')
   .filter('suffixFilter', SuffixFilter);

一旦你注册了后缀过滤器, 您只需在标记中使用您关心的参数调用它 。其余部分由Angular控制。

<!-- Pass in the current selection to ignore -->
suffixes | suffixFilter:label.suffix

更新- 基于以下评论 :

函数参数并不是这样工作的。它期望计算为可调用的函数。

从技术上讲 您可以返回一个函数并使用闭包来完成所需的操作。类似于:

<!-- In your markup -->
filter:suffixFilter(label.suffix)

//In your controller
$scope.suffixFilter = function (selectedValue) {

   //this is your actual filter here
   return function(item){

      //You have access to 'selectedValue' via
      // a closure
      return item == someCriteria || item === selectedValue;
   }
}

因此,尽管这当然是可能的,但我认为自定义过滤器在语义上更清晰。