Angular 1x：仅过滤来自 2 列的数据答案

【问题标题】：Angular 1x: filter data from 2 columns onlyAngular 1x：仅过滤来自 2 列的数据
【发布时间】：2018-11-06 21:32:08
【问题描述】：

我对 Angular 1x 有疑问。如果仅与标题和内容匹配，我想过滤以下记录。我尝试将ng-model 提供给我的输入并应用与ng-repeat= t in t.items | filter:keyword 相同的方法，但它也使用链接和所有其他列过滤数据。

var myApp = angular.module('myApp',[]);

    myApp.controller('SearchController', ['$scope', function($scope) {

        $scope.results = [
            { title : "Cars", link: "http://tutorialedge.net", content: "lorem ipsum doler fox pixel"},
            { title : "Boats", link: "http://tutorialedge.net", content: "lorem ipsum doler cat pixel"},
            { title : "Vans", link: "http://tutorialedge.net", content: "lorem ipsum doler pig pixel"},
            { title : "Limos", link: "http://tutorialedge.net", content: "lorem ipsum doler pixel"}
        ];

    }]);

是否可以从 2 列中过滤数据？

编辑

我有一个<input type="search" />，我想在用户开始输入后立即过滤数据，但它应该只在两列中搜索关键字。

【问题讨论】：

您可以向filter 组件提供表达式，也可以编写自己的自定义比较器。 docs.angularjs.org/api/ng/filter/filter

标签： angularjs filter angularjs-1.6 angular1.6

【解决方案1】：

看看https://docs.angularjs.org/api/ng/filter/filter，它很好地解释了一切。对于您的问题，您可以这样做：

组件的控制器：

$scope.results = [
        { title : "Cars", link: "http://tutorialedge.net", content: "lorem ipsum doler fox pixel"},
        { title : "Boats", link: "http://tutorialedge.net", content: "lorem ipsum doler cat pixel"},
        { title : "Vans", link: "http://tutorialedge.net", content: "lorem ipsum doler pig pixel"},
        { title : "Limos", link: "http://tutorialedge.net", content: "lorem ipsum doler pixel"}
    ];

$scope.mySubstringExpression = "Vans";

$scope.myFancyFilter = function(element) {
    return element.title.indexOf(mySubstringExpression) > -1 || element.contant.indexOf(mySubstringExpression) > -1;
};

然后在组件的模板中：

<div ng-repeat="item in results | filter:myFancyFilter">

【讨论】：

【解决方案2】：

另一种方法：

$scope.filterResult = []
$scope.filterParams = {
    title = "all",
    content = "all"
}
$scope.filter = function (){
    if($scope.filterParams.title == "all" && $scope.filterParams.content == "all") {
        $scope.filterResult = $scope.results
    } else {
        $scope.filterResult = $scope.results.filter(x => 
            x.title == $scope.filterParams.title && 
            x.content == $scope.filterParams.content)
    }
}

那么你只需要在 $scope.filterResult 上使用 ng-repeat

<div ng-repeat="item in filterResult">

您只需将 ng-model 与 $scope.filterParams 一起使用，每次更改过滤器时只需调用 $scope.filter() 并且 $scope.filterResult 将被更新。

【讨论】：

【解决方案3】：

你可以通过使用这种方法来实现这一点

ng-repeat=" t in t.items | filter: {'title': 'Cars'}: true"

【讨论】：