I am new to this framework, hence practicing Angularjs and following the tutorials available on the website.
there is an example were we can search the data present in table,
the example is as follows,
<!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>
Here in the above code i am able to search the phone using two different inputs i.e. search by model Name and search by company Name ,
the above code runs fine,
But what if i need to search by using the type of search present in the select options,
the code is as follows
<!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>
From the above code you can see that i am trying to achieve is search employee by Name, Company or Designation present in the selection box,
but i am going wrong here,
the ng-model query doesn't picks up the right mapping,
or may be i am doing in a wrong way,
can you please tell me how will i achieve this,
which part of the code should i change
