Tôi mới làm quen với khung này, do đó thực hành Angularjs và làm theo hướng dẫn có sẵn trên trang web.Bộ lọc tìm kiếm theo Angular.js,
có là một ví dụ là chúng ta có thể tìm kiếm các dữ liệu có trong bảng, ví dụ như sau,
<!DOCTYPE html>
<html ng-app="SmartPhoneApp">
<head>
<title>Smart phone Angular</title>
<script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>
<script type="text/javascript">
var smartPhoneApp = angular.module("SmartPhoneApp",[]);
smartPhoneApp.controller("phoneCtrl",function($scope){
$scope.phones = [
{
"modelName" : "LUMIA 520",
"companyName" : "NOKIA"
},
{
"modelName" : "GALAXY S Series",
"companyName" : "SAMSUNG"
},
{
"modelName" : "CANVAS",
"companyName" : "MICROMAX"
},
{
"modelName" : "OPTIMUS",
"companyName" : "LG"
}
];
});
</script>
</head>
<body>
Search by Model Name : <input ng-model="comp.modelName" />
Search by Company : <input ng-model="comp.companyName" />
<div ng-controller="phoneCtrl">
<table ng-repeat="phone in phones | filter: comp">
<tr>
<td>{{phone.modelName}}</td>
<td>{{phone.companyName}}</td>
</tr>
</table>
</div>
</body>
</html>
đây trong đoạn mã trên tôi có thể tìm kiếm trên điện thoại sử dụng hai đầu vào khác nhau tức là tìm kiếm theo Tên mô hình và tìm kiếm theo tên công ty, mã trên chạy tốt,
Nhưng những gì nếu tôi cần phải tìm kiếm bằng cách sử dụng các loại tìm kiếm hiện nay trong các tùy chọn chọn,
mã là như sau
<!DOCTYPE html>
<html ng-app="EmployeeApp">
<head>
<title>Orderring People</title>
<script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>
<script type="text/javascript">
var employeeApp = angular.module("EmployeeApp",[]);
employeeApp.controller("empCtrl",function($scope){
$scope.employees = [
{
"name" : "Mahesh Pachangane",
"company" : "Syntel India Pvt. Ltd",
"designation" : "Associate"
},
{
"name" : "Brijesh Shah",
"company" : "Britanica Software Ltd.",
"designation" : "Software Engineer"
},
{
"name" : "Amit Mayekar",
"company" : "Apex Solutions",
"designation" : "Human Resource"
},
{
"name" : "Ninad Parte",
"company" : "Man-made Solutions",
"designation" : "Senior Architect"
},
{
"name" : "Sunil Shrivastava",
"company" : "IBM",
"designation" : "Project Lead"
},
{
"name" : "Pranav Shastri",
"company" : "TCS",
"designation" : "Senior Software Engineer"
},
{
"name" : "Madan Naidu",
"company" : "KPMG",
"designation" : "Senior Associate"
},
{
"name" : "Amit Gangurde",
"company" : "Amazon",
"designation" : "Programe Manager"
}
];
$scope.orderProp="name";
});
</script>
</head>
<body ng-controller="empCtrl">
<table>
<tr>
<td align="right">Search :</td>
<td><input ng-model="query" /></td>
</tr>
<tr>
<td align="right">Search By :</td>
<td>
<select ng-model="query">
<option value="name">NAME</option>
<option value="company">COMPANY</option>
<option value="designation">DESIGNATION</option>
</select>
</td>
</tr>
</table>
<hr>
<div>
<table>
<tr>
<th>Employee Name</th>
<th>Company Name</th>
<th>Designation</th>
</tr>
<tr ng-repeat="emp in employees | filter:query">
<td>{{emp.name}}</td>
<td>{{emp.company}}</td>
<td>{{emp.designation}}</td>
</tr>
</table>
</div>
</body>
Từ đoạn code trên bạn có thể thấy rằng tôi đang cố gắng để đạt được là nhân viên tìm kiếm bằng "Tên", "Công ty" hoặc "Chỉ" có mặt trong hộp lựa chọn,
nhưng tôi đang đi sai ở đây,
truy vấn ng mô hình không nhấc ánh xạ đúng, hoặc có thể là tôi đang làm trong một cách sai lầm,
bạn có thể vui lòng cho tôi biết làm thế nào tôi sẽ đạt được điều này,
mà một phần của mã tôi nên thay đổi
http://www.angulartutorial.net/2015/04/angular-js-basic-search-and-filter-data.html – Prashobh