Question

我有一个搜索输入字段，如下所示：

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name" />

在div中我有一个看起来像这样的ng-repeat：

<div ng-repeat="item in listItemsFiltered = (listItems | filter:search) | orderBy:'Name' | startFrom: currentPage*pageSize | limitTo: pageSize">

每个项目都有一个名称和一个数字。目前，搜索过滤器仅适用于Name，因为在ng-model中我编写了search.Name。

我想要的是将搜索过滤器应用于变量Number。

我对angularjs全新，发现它有点令人困惑，所以我不知道怎么做：）

我尝试了类似下面的内容：

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name | search.Number" />
<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name, search.Number" />

但以上都没有。

有人能告诉我如何实现这个目标吗？

Thx：）

Answer 1

看看这个Plunker（不是我的）

 $scope.search = function (row) {
        return (angular.lowercase(row.Name).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
                angular.lowercase(row.Number).indexOf(angular.lowercase($scope.query) || '') !== -1);
    };

解决方案是创建自己的过滤器，它将应用于两个（或更多）值！

Answer 2

我可以分享你的想法： -

尝试使用angularJS Filter或Service，您可以实现此目的。

或创建自己的自定义过滤器，而不是使用内置过滤器。

示例：

angular.module（'module'，[]）

。过滤（'customfiltername'，function（）{

返回功能（输入）{

返回“值”;

};   }）;

Answer 3

尝试以这种方式使用

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.$" />

其中＆＃34; $＆＃34;意味着搜索＆＃34;搜索＆＃34;的所有键。对象

参考：https://docs.angularjs.org/api/ng/filter/filter

Answer 4

试试这个：

创建两个输入框。一个用于名称，另一个用于数字

    $(function () {
        $('#datetimepicker3').datetimepicker({
            format: 'HH:mm'
        });
        $('#datetimepicker5').datetimepicker({
            format: 'HH:mm'
        });


    });

现在对相应的字段进行过滤

<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Name" />
<input type="search" placeholder="Søg i liste" ng-cloak ng-model="search.Number" />

Answer 5

您只能使用搜索设置search.Name。

看下面的plunker

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope, $modal) {
  $scope.name = 'World';
  $scope.data = {};
  
  $scope.listItems = [
    {'Name': 'abcd', 'Number':120},
    {'Name': 'abc', 'Number':12},
    {'Name': 'abcx', 'Number':23},
    {'Name': 'xyz', 'Number':24}
  ];
  $scope.listItemsFiltered = $scope.listItems;
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <input type="search" placeholder="Search" ng-cloak ng-model="search" />
      
      <div ng-repeat="item in listItemsFiltered = (listItems | filter:search) | orderBy:'Name'">{{item}}</div>
    </div>
  </body>

</html>

Angularjs - 如何对多个变量进行搜索过滤

5 个答案: