使用数值过滤精确搜索和匹配答案

【问题标题】：filter Exact Search and matching with Numeric Value使用数值过滤精确搜索和匹配
【发布时间】：2016-02-28 03:35:41
【问题描述】：

在搜索数值时，我的过滤器出现问题。我希望对“矩阵”进行精确搜索（使用 custum 过滤器），但这是我的代码中的一个问题，我不知道。这是我的索引：

<html>
  <head>
    <meta charset='utf-8'>
    <script src="js/angular.js"></script>
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>
    <body ng-app="MyApp">
    <div ng-controller="MyCtrl">

      <h3>Filter by numeric value</h3>
      <form class="form-inline">
        <input ng-model="match.matricule" type="text" placeholder="Filter by matricule" autofocus>
      </form>
      <ul ng-repeat="friend in (result = (friends | exact: match ) ) ">
        <li>{{friend.matricule}} - {{friend.name}} ({{friend.age}})</li>
      </ul>
      <p ng-show="result.length == 0"> Not Found </p>
      {{result}}

    </div>

  </body>
</html>

这是我的控制器：

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope) {
  $scope.friends = [
    { matricule :1 , name: "Peter",   age: 20 , region : 'analamanga1'},
    { matricule :2 ,name: "Pablo",   age: 55 , region : 'analamanga2'},
    { matricule :3 ,name: "Linda",   age: 20 , region : 'analamanga3'},
    { matricule :4 ,name: "Marta",   age: 37 , region : 'analamanga4'},
    { matricule :5 ,name: "Othello", age: 20 , region : 'analamanga5'},
    { matricule :11 ,name: "Markus",  age: 32 , region : 'analamanga6'}
  ];

  $scope.filterFunction = function(element) {
    return element.name.match(/^Ma/) ? true : false;
  };

})

app.filter('exact', function(){
  return function(items, match){
    var matching = [], matches, falsely = true;
    
    // Return the items unchanged if all filtering attributes are falsy
    angular.forEach(match, function(value, key){
      falsely = falsely && !value;
    });
    if(falsely){
      return items;
    }
    
    angular.forEach(items, function(item){ 
      matches = true;
      angular.forEach(match, function(value, key){ // e.g. 'all', 'title'
        if(!!value){ 
          matches = matches && (item[key] === value);  
        }
      });
      if(matches){
        matching.push(item);  
      }
    });
    return matching;
  }
});

示例：plnkr SAMPLE

谢谢

【问题讨论】：

标签： angularjs filtering

【解决方案1】：

Omg...如果你只想过滤这个你太难了，你可以使用角度过滤器让它变得如此简单，你只需要这样做：

HTML：

<html>
  <head>
    <meta charset='utf-8'>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>

  </head>
    <body ng-app="MyApp">
    <div ng-controller="MyCtrl">

      <h3>Filter by numeric</h3>
      <form class="form-inline">
        <input ng-model="match.matricule" type="text" placeholder="Filter by matricule" autofocus>
      </form>

      <ul ng-repeat="friend in friends | filter:match:strict">
        <li>{{friend.matricule}} - {{friend.name}} ({{friend.age}})</li>
      </ul>
      <p ng-show="result.length == 0"> Not Found </p>

    </div>

  </body>
</html>

控制器

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope) {
  $scope.friends = [
    { matricule :1 , name: "Peter",   age: 20 , region : 'analamanga1'},
    { matricule :2 ,name: "Pablo",   age: 55 , region : 'analamanga2'},
    { matricule :3 ,name: "Linda",   age: 20 , region : 'analamanga3'},
    { matricule :4 ,name: "Marta",   age: 37 , region : 'analamanga4'},
    { matricule :5 ,name: "Othello", age: 20 , region : 'analamanga5'},
    { matricule :11 ,name: "Markus",  age: 32 , region : 'analamanga6'}
  ];
});

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

----------- 已编辑 -------------

好的，抱歉，我没有很好地理解您的问题。让我们试试这个：

HTML：

<html>
  <head>
    <meta charset='utf-8'>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>

  </head>
    <body ng-app="MyApp">
    <div ng-controller="MyCtrl">

      <h3>Filter by numeric</h3>
      <form class="form-inline">
        <input ng-model="matricule" type="text" placeholder="Filter by matricule" autofocus>
      </form>

      <ul ng-repeat="friend in friends | filter:myFilter">
        <li>{{friend.matricule}} - {{friend.name}} ({{friend.age}})</li>
      </ul>
      <p ng-show="result.length == 0"> Not Found </p>

    </div>

  </body>
</html>

控制器：

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope) {
  $scope.friends = [
    { matricule :1 , name: "Peter",   age: 20 , region : 'analamanga1'},
    { matricule :2 ,name: "Pablo",   age: 55 , region : 'analamanga2'},
    { matricule :3 ,name: "Linda",   age: 20 , region : 'analamanga3'},
    { matricule :4 ,name: "Marta",   age: 37 , region : 'analamanga4'},
    { matricule :5 ,name: "Othello", age: 20 , region : 'analamanga5'},
    { matricule :11 ,name: "Markus",  age: 32 , region : 'analamanga6'}
  ];

  $scope.myFilter = function (data) {

    if ($scope.matricule === '' || !$scope.matricule) return true;
    var reg = RegExp("^" + $scope.matricule + "$");
    return reg.test(data.matricule);
};
});

参考：exact filter in angular

--------- 更新的 v2 -----

如果搜索字段为空，则在列表中显示“无”，需要保存过滤后的结果：

HTML：

<html>
  <head>
    <meta charset='utf-8'>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>

  </head>
    <body ng-app="MyApp">
    <div ng-controller="MyCtrl">

      <h3>Filter by numeric</h3>
      <form class="form-inline">
        <input ng-model="matricule" type="text" placeholder="Filter by matricule" autofocus>
      </form>

      <ul ng-repeat="friend in (filteredItems = (friends | filter:myFilter))">
        <li>{{friend.matricule}} - {{friend.name}} ({{friend.age}})</li>
      </ul>
      <p ng-show="filteredItems.length == 0"> Not Found </p>

    </div>

  </body>
</html>

【讨论】：

我的问题是当我搜索“1”时，我只想在结果中有“1”，而不是“1”和“11”。它不适用于此代码，
@Javief -->如果搜索字段为空，是否可以从列表中不显示任何内容？
控制器没有变化吗？我已经试过了，但它不起作用
你好 Javief ==> 我希望在同一个列表中搜索“Chef1”和“Chef2”，并且我知道如何在我的 ng-model 上进行操作。这是一个 plnkr 示例：plnkr.co/edit/sofXBZfNWEaKP0L4y5fZ?p=preview