Question

我有一个ng-repeat，它遍历我想要执行“| filter：search”的文档，但希望过滤器在文档中的特定字段上运行。

我找到了几个例子，但是没有用。

（我有一个带有model = search的输入字段）......

他们说你定位特定字段的方式是这样的：

<div ng-repeat="x in data | filter({first_name:search,last_name:search })">{{x.first_name}} {{x.last_name}}</div>

我记得过去做过一些事情，我认为这很接近，但并不完全。

任何帮助？

Answer 1

// Code goes here
(function(){
  
  var myApp = angular.module('myApp',['angular.filter']);
  
  myApp.controller('myCtrl', function($scope){
    var vm= this;
    vm.x = 20;
    
    vm.tableData = [
      {
        first_name: 'Programmer',
        last_name: '21',
      },{
        first_name: 'Abc',
        last_name: 'Xyz'
      },{
        first_name: 'Kunvar',
        last_name: 'Singh'
      },{
        first_name: 'Cnak',
        last_name: '2'
      }
      ];
  })
  
})();

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script data-require="angular-filter@0.5.2" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myCtrl as vm">
  <input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
   <table>
     <tr ng-repeat="row in vm.tableData | filterBy: ['first_name','last_name']: vm.searchText">
       <td>{{row.first_name}}</td>
       <td>{{row.last_name}}</td>
     </tr>
   </table>
   <p>This will show filter from <b>two columns</b> only(first_name and last_name) . Not from all. Whatever columns you add into filter array they
   will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p>
  </body>
</html>

Answer 2

这是一个表格，用于搜索输入all中的eachColumn和所有列。下面是例子 - ＆gt; pnlkr 一切都可以在视图中完成。的 HTML

<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/> <link rel="stylesheet" href="style.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl as rchCtrl"> <div> <label>Search</label> <input ng-model="searchAll"> <hr> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>NAME</th> <th>AGE</th> </tr> </thead> <tbody> <tr> <td> <input ng-model="searchID"> </td> <td> <input ng-model="searchName"> </td> <td> <input ng-model="searchAge"> </td> </tr> <tr ng-repeat="item in peoples |filter: {id:searchID, name:searchName, age:searchAge} | filter:searchAll"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.age}}</td> </tr> </tbody> </table> </div> </body> </html>

<强> CONTROLLER

var app = angular.module('plunker', ['ngAnimate']); app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.peoples = [ {id:1, name:'Kalesi', age:50}, {id:2, name:'Jon', age:43}, {id:3, name:'Jonas', age:34}, {id:4, name:'Sam', age:29}, {id:5, name:'Samuel', age:50}, {id:6, name:'Tyrion', age:20} ]; });

Ng重复过滤多个字段

3 个答案: