如何用另一个字符串数组过滤ng重复中的字符串数组

How can I filter a string array in ng-repeat with another string array?

本文关键字：字符串 数组 过滤 何用 另一个 ng      更新时间：2023-09-26

我有一个要筛选的select元素：

<select multiple="multiple" class="span2" data-ng-model="selectedParameters">
    <option data-ng-repeat="parameter in availableParameters">
        {{parameter}}
    </option>
</select>

"available Parameters"是一个字符串数组，我可以从这里毫无问题地访问它，而"selectedParameters"则是另一个表示UI中所选元素的字符串数组。

availableParameters = ["AAA", "BBB", "CCC", "DDD"];

我在对象图下有另一个字符串数组（可在HTML中访问）

graph.parameters = ["AAA", "BBB"];

我试图通过"图形参数"过滤"可用参数"，并获得如下列表："CCC"、"DDD"

我查看了AngularJS的文档，但找不到解决问题的示例。

我所能做的就是这样：

<option data-ng-repeat="parameter in availableParameters | filter: !graph.parameters ">{{parameter}}</option>

您可以制作一个自定义过滤器来过滤掉graph.parameters:中没有的所有项目

angular.module('yourModuleNameHere').filter('params', [function(){
    return function (items, filterBy) {
      return items.filter(function(currentItem){
        return filterBy.indexOf(currentItem) === -1;
      });
    };
}]);

之后，您可以将其用作：

<select multiple="multiple" class="span2" data-ng-model="selectedParameters">
    <option data-ng-repeat="parameter in availableParameters | params:graph.parameters">
        {{parameter}}
    </option>
</select>

您可以通过多种方式实现这一点，当数据可能发生变化时，过滤器很有用，但我认为情况并非如此，您只需要在控制器中添加一个简单的业务登录。。。看看以下内容：

var rawlist = ['foo', 'baz', 'bar'];
var blacklist = ['baz'];
var list = rawlist.filter(function(item) {
  return blacklist.indexOf(item) < 0;
});
console.log('available parameters are', list);

所以，你的观点可以是：

<select ng-model="someScopeProperty" ng-options="item for item in list track by $index"></select>

相关文章：