Javascript 如何有条件地将筛选器添加到ng repeat inside指令？

我在几个视图上使用一个元素指令。该指令对资源列表中的每个“资源”重复，如下所示：

ng repeat=“resource in resources”

不同的页面控制器将通过在每个视图控制器中具有不同的

$scope.resourceApiPath

来确定将从API中提取哪些资源，然后指令控制器使用这些视图控制器进行

$http

调用

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

唯一的问题是，对于我的一个视图，我想在

ng repeat

上添加一个过滤器，就像这样：

ng repeat=“资源中的资源”过滤器：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();

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

scripts/templates/resource panel.html

元素模板如下所示：

$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();

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

{{resource.content}

谢谢

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

{{resource.content}

还没有测试，如果我犯了错误，请告诉我

然后

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

{{resource.content}

---

还没有测试，如果我犯了错误，请告诉我。

我认为您可以选择四种方法中的一种，我更喜欢1和3，但这完全取决于您的需求和代码标准，哪一种最适合您

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

如果您使用文本值作为过滤器，那么，如果您没有设置resourceSearch.text的值，那么它与没有过滤器一样好，因此如果resourceSearch.text存在，它将进行过滤，如果它未定义，那么就没有过滤器

ng repeat=“资源中的资源|过滤器：resourceSearch.text”

创建一个自定义过滤器并在那里处理它

如果你想创建一个自定义过滤器，那么使用enable参数，你可以使用它来打开和关闭你的过滤器。我已经找到了一个适合你需要的自定义过滤器的plunkr

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

在控制器中过滤您的最终资源，并将过滤后的值传递给html

在条件中使用ng if，如果过滤器存在，则使用一个循环，如果不存在，则使用另一个循环

---

我希望这会有所帮助。

我认为您可以从四种方式中选择一种，我更喜欢1和3，但这完全取决于您的需求和代码标准，哪种方式最适合您

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

如果您使用文本值作为过滤器，那么，如果您没有设置resourceSearch.text的值，那么它与没有过滤器一样好，因此如果resourceSearch.text存在，它将进行过滤，如果它未定义，那么就没有过滤器

ng repeat=“资源中的资源|过滤器：resourceSearch.text”

创建一个自定义过滤器并在那里处理它

如果你想创建一个自定义过滤器，那么使用enable参数，你可以使用它来打开和关闭你的过滤器。我已经找到了一个适合你需要的自定义过滤器的plunkr

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

在控制器中过滤您的最终资源，并将过滤后的值传递给html

在条件中使用ng if，如果过滤器存在，则使用一个循环，如果不存在，则使用另一个循环

---

我希望这会有所帮助。

您可以使用自定义筛选功能：

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

{{resource.content}

您可以使用自定义筛选功能：

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

{{resource.content}

问题在于，我实际上已经大大简化了模板：实际上，面板中还有大量的代码，因此这需要将所有代码都写两次，这是非常湿的-更不用说违背了将其分离为模板的理由。@Aron WET与DRY相反？这是一个新的：）请解释一下这是如何回答这个问题的。虽然OP可能知道你的意思，但并不是每个看到这个问题和答案的人都会知道，而且Stack Overflow是一个知识库，不是一个人可以获得帮助的地方，什么也没有else@shmosel是的，它代表将所有内容都写两次：）问题是我实际上已经大大简化了模板：实际上面板中还有很多代码，所以这需要将所有内容都写两次，这是非常湿的-更不用说违背了将其分离为模板的理由。@Aron WET是DRY的反面吗？这是一个新的：）请解释一下这是如何回答这个问题的。虽然OP可能知道你的意思，但并不是每个看到这个问题和答案的人都会知道，而且Stack Overflow是一个知识库，不是一个人可以获得帮助的地方，什么也没有else@shmosel，是的，它代表将所有内容写入两次：）我决定使用您的

enable

参数，因为这是将其与当前设置集成的最简单方法。谢谢我决定使用您的

enable

参数，因为这是将其与当前设置集成的最简单方法。谢谢