8
私はこのフレームワークには新しいので、Angularjsを練習し、ウェブサイトで入手できるチュートリアルに従ってください。Angular.jsの検索フィルター、
の例では、我々は、テーブルに存在するデータを検索することができたがあり、 例は以下のとおりである、私は2つの異なる入力すなわち検索を利用して携帯電話を検索できるようにしています上記のコードではここ
<!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>
しかし、私が選択したオプションに存在する検索の種類を使用して検索する必要がある場合はどのような、
コードで
<!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>
は、「名前」、「当社」または「指定」で選択ボックス内に存在サーチ従業員をされ、次のように、
ですしかし、私はここで間違っつもりです、
NG-モデルクエリーが 、右のマッピングをピックアップしていないか、私は間違った方法でやっているかもしれ、
あなたのコードは、常に文字列を送信しながら、あなたは、コードの
どの部分iは、
http://www.angulartutorial.net/2015/04/angular-js-basic-search-and-filter-data.html – Prashobh