Question

我有一组项目，我想在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>

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

我做错了什么？

Answer 1

'！'字符前置到过滤字符串，如下所示：

过滤器： '！' + languageOrigin

<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>

Answer 2

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

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

在AngularJS 1.1.5中测试。

Answer 3

更新：请参阅ENDOH takanao的回答。

看着AngularJS source code，~~看来'！'否定谓词的结果，而不是谓词本身~~：

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>

示例fiddle。

Answer 4

如果您使用方法进行过滤，则使用“！”前缀方法名称不管用。相反，你可以做类似的事情：

// 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

Answer 5

我使用1.3.15并且{{3}}解决方案不起作用。相反，UIWebView为我工作。

Answer 6

要完全否定$ 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>

Angularjs过滤器否定了

6 个答案: