22

我有一组项目，我想在 ng-repeat 中使用 ng-model 作为字符串来过滤集合，到目前为止我还没有找到一种方法让它在表达式被否定时工作，我是做这样的事情：

<select ng-model="languageOrigin" ng-change="updatePrice()">
             <option ng-repeat="language in languages">{{language}}</option>
</select>
<select ng-model="languageDestination" ng-change="updatePrice()">
            <option ng-repeat="language in languages | filter:!languageOrigin">{{language}}</option>
</select>

在文档中，它说我们应该使用！否定表达式，但仍然没有运气。

我究竟做错了什么？

4

6 回答 6

43

'！' 过滤器字符串前面的字符，如下所示：

过滤器：'！'+语言来源

<select ng-model="languageOrigin" ng-change="updatePrice()">
  <option ng-repeat="language in languages">{{language}}</option>
</select>
<select ng-model="languageDestination" ng-change="updatePrice()">
  <option ng-repeat="language in languages | filter:'!'+languageOrigin">{{language}}</option>
</select>
于 2012-11-19T09:08:36.670 回答
25

如果使用对象，您可能还对以下内容感兴趣：

<li data-ng-repeat="obj in objs | filter:({obj_attr: '!obj_val'})">
   ...
</li>

在 AngularJS 1.1.5 中测试。

于 2013-10-01T09:47:52.837 回答
4

更新：见 ENDOH takanao 的回答。

查看 AngularJS源代码，似乎是“！” 否定谓词的结果，而不是谓词本身：

var search = function(obj, text){
    if (text.charAt(0) === '!') {
       return !search(obj, text.substr(1));
    }
    switch (typeof obj) {
    ...

因此，解决此问题的一种方法是[如果您不喜欢 '!'+myFilter 语法，] 您可以在控制器中定义自己的谓词函数：

$scope.inverseOriginFilter = function(item) {
    return item.search($scope.languageOrigin) == -1
}

然后在您的 HTML 中使用它：

<select ng-model="languageDestination" ng-change="updatePrice()" 
    ng-options="language for language in languages | filter:inverseOriginFilter">
</select>

示例小提琴。

于 2012-11-07T23:05:55.573 回答
3

如果您使用一种方法进行过滤，而不是在方法名称前加上“！” 不管用。相反，您可以执行以下操作：

// You can register this in your AppCtrl if you like, otherwise just use $scope.
$rootScope.not = function(func) {
    return function (item) { 
        return !func(item); 
    }
};

然后你做：

filter:not(myFilterMethod)

在您的 html 中，它看起来像：

<select ng-model="languageDestination" ng-change="updatePrice()">
  <option ng-repeat="language in languages | filter:not(languageOrigin)">{{language}}</option>
</select>

参考： https ://stackoverflow.com/a/17811582/175830

于 2015-03-16T23:55:41.163 回答
1

我正在使用 1.3.15 并且ENDOH 的解决方案不起作用。相反，filter:'!':languageOrigin为我工作。

于 2015-06-12T11:44:44.290 回答
0

为了完全否定 $filter 过滤器，我添加了这个过滤器：

.filter('$nfilter', ['$filter', function($filter) {
    return function() {
        var itemsToExclude = $filter('filter').apply(null, arguments);
        return arguments[0].filter(x => !itemsToExclude.includes(x));
    }
}])

在模板中，我们可以写：

<ui-select-choices repeat="type.id as type in data.types | $nfilter:{id: form.typeId}:true | filter: {label: $select.search}">
    <div ng-bind-html="type.label | highlight: $select.search"></div>
</ui-select-choices>
于 2020-01-21T12:38:50.110 回答