แนวทางตรงไปตรงมาโดยใช้ filterBy ใน angularJs
สำหรับการทำงาน plnkr ตามลิงค์นี้
http://plnkr.co/edit/US6xE4h0gD5CEYV0aMDf?p=preview
สิ่งนี้ใช้คุณสมบัติเดียวเป็นพิเศษเพื่อค้นหาหลายคอลัมน์ แต่ไม่ใช่ทั้งหมด
<!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: ['col1','col2']: vm.searchText">
<td>{{row.col1}}</td>
<td>{{row.col2}}</td>
<td>{{row.col3}}</td>
</tr>
</table>
<p>This will show filter from <b>two columns</b> only(col1 and col2) . 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>
ตัวควบคุม
// Code goes here
(function(){
var myApp = angular.module('myApp',['angular.filter']);
myApp.controller('myCtrl', function($scope){
var vm= this;
vm.x = 20;
vm.tableData = [
{
col1: 'Ashok',
col2: 'Tewatia',
col3: '12'
},{
col1: 'Babita',
col2: 'Malik',
col3: '34'
},{
col1: 'Dinesh',
col2: 'Tewatia',
col3: '56'
},{
col1: 'Sabita',
col2: 'Malik',
col3: '78'
}
];
})
})();
ng-model(การระบุsearch.nameในช่อง INPUTng-model) จะส่งผลให้วัตถุที่ทำซ้ำถูกกรองโดยnameคุณสมบัติของพวกเขา? สำหรับฉันโดยสัญชาตญาณคุณควรจะกรองโดยเฉพาะได้nameโดยการระบุในng-repeatตัวกรองของคุณ:filter: friend.nameแทนที่จะเขียน `<input ng-model =" search.name "> ...