Question

我在几个视图上使用了一个元素指令。该指令针对每个资源重复进行。在资源列表中，就像这样：ng-repeat="resource in resources"。

不同的页面控制器将通过在每个视图控制器中使用不同的$scope.resourceApiPath来确定将从API中提取哪些资源，指令控制器随后使用该$http进行ng-repeat调用。

这适用于显示不同资源的不同视图。例如，一个视图显示所有用户自己的资源，一个视图显示公共资源，一个视图显示用户已加星标的资源等。

唯一的问题是，对于我的某个观看次数，我想在ng-repeat="resource in resources | filter:resourceSearch.text"上添加过滤器，如下所示：$scope.filter == true;。有没有办法让我根据条件添加此过滤器，例如如果ng-repeat="resource in resources"，则只返回常规.directive('resourcePanel', function() { return { restrict: 'E', scope: false, templateUrl: 'scripts/templates/resource-panel.html', controller: 'ResourcesPanelController' } })？

这是我的指示：

ResourcesPanelController

指令中引用的$scope.resources = []; $scope.loadResources = function() { $scope.resources = []; // Empty the array $http.get('/api/resource' + $scope.resourceApiPath) .then(function(res) { $scope.resources = res.data.message; }); }; $scope.loadResources();具有以下内容：

scripts/templates/resource-panel.html

<div class="panel" ng-repeat="resource in resources"> {{resource.content}} </div>元素模板如下所示：

td

谢谢！

Answer 1

我认为你可以选择四种方式之一，我更喜欢1和3，但它完全取决于你最适合自己的要求和代码标准。

自定义过滤器也是一个干净的解决方案。

如果您正在使用文本值进行过滤，那么，如果您没有设置resourceSearch.text的值，那么它就像没有过滤器一样好，所以如果resourceSearch.text存在，它将过滤，如果它未定义，然后没有过滤器。

ng-repeat =＆＃34;资源中的资源|滤波器：resourceSearch.text＆＃34;
创建自定义过滤器并在那里处理。

如果您想创建自定义过滤器，请使用启用参数，您可以使用该参数打开和关闭过滤器http://plnkr.co/edit/ilPJPUZkBC7Y5OvGHWey?p=preview我已经找到了一个适合您需要的自定义过滤器

ng-repeat="resource in resources | customfilter:resourceSearch.text:enable"

过滤控制器中的最终资源，并将过滤后的值传递给html
如果你的条件是ng-if，那么如果过滤器存在，那么就有一个循环，如果它不存在那么循环。

我希望它会有所帮助。

Answer 2

您可以使用自定义过滤功能：

$scope.conditionalFilter = function(resource) {
    if (!$scope.filter) {
        return true;
    }

    // normal filter logic goes here, e.g.
    return resource.content.indexOf($scope.resourceSearch.text) >= 0;
};

然后在您的模板中使用自定义过滤器：

<div class="panel" ng-repeat="resource in resources | filter:conditionalFilter">
    {{resource.content}}
</div>

Answer 3

<div ng-if="!filter" class="panel" ng-repeat="resource in resources">
    {{resource.content}}
</div>
<div ng-if="filter" class="panel" ng-repeat="resource in resources| filter:resourceSearch.text">
    {{resource.content}}
</div>

很抱歉没有描述，我有时会使用它，如果我很确定它只会出现一次，因为当你压扁它时..

<div ng-if="!filter" class="panel" ng-repeat="resource in resources">{{resource.content}}</div>
<div ng-if="filter" class="panel" ng-repeat="resource in resources|filter:resourceSearch.text">{{resource.content}}</div>

然后它看起来真的不那么糟糕。

但更完整的解决方案是设置自定义过滤器并注入＆＃39;过滤器＆＃39;

app.filter('conditionalFilter', function (filter) {
  return function (item, condition) {
    if(condition){
       return filter.bind(this,item).apply(this,[].slice.call(arguments,2));
    } else{ return item }
  };
});

然后

<div class="panel" ng-repeat="resource in resources| conditionalfilter : !!filter : researchSearch.text" >
    {{resource.content}}
</div>

Haven未经测试，如果我犯了错误，请告诉我。

如何有条件地将过滤器添加到ng-repeat内部指令中？

3 个答案: