I am currently working on a webpage with AngularJS and I am looking to implement some filters on the site.
Here is the HTML code I have:
<div ng-repeat="data in datas | filter:{area:course} | filter:{subject:subFilter} | filter:{city:cityFilter}">
<h5><span class="text-warning">#</span> {{data.intrest}}</h5>
<div class="row">
<div class="col-xs-3">
<h5 class="text-info">Name</h5>
<p>{{data.name}}</p>
</div>
<div class="col-xs-3">
<h5 class="text-info">Subject</h5>
<p>{{data.subject}}</p>
</div>
<div class="col-xs-3">
<h5 class="text-info">Address</h5>
<p>{{data.city}}, {{data.state}}</p>
</div>
<div class="col-xs-3">
<a href="#/view"><button class="btn btn-warning" style="margin-top:10px;">View</button></a>
</div>
</div>
<hr>
</div>
This is my controller file:
app.controller('mainController',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
$http.get('assets/newtab.json').success(function(data){
$scope.department = data;
$scope.whichItem = $routeParams.itemId;
$scope.course = $scope.department[$scope.whichItem].course;
});
$http.get('assets/engineering.json').success(function(data){
$scope.datas = data;
$scope.whichItem = $routeParams.itemId;
$scope.optItem = [
{title:"Random",value:" "},
{title:"Question Paper Setting",value:"Question Paper Setting"},
{title:"Question Paper Passing Board",value:"Question Paper Passing Board"},
{title:"Question Paper Post Auditing",value:"Question Paper Post Auditing"},
{title:"Question Paper Evaluation",value:"Question Paper Evaluation"},
{title:"Member for board of study",value:"Member for board of study"},
{title:"Member for academic council",value:"Member for academic council"},
{title:"Result passing board",value:"Result passing board"},
{title:"Invigilation",value:"Invigilation"},
{title:"Door Valuation",value:"Door Valuation"},
{title:"Exam squad",value:"Exam squad"}
];
});
}]);
Snippet from engineering.json and newtab.json:
engineering.json
[{"id":"1","name":"Sam","dob":"","age":"21","gender":"","department":"16\/03\/1995","area":"Nuclear Medicine Technology Course","institution":"Park College of Technology ","city":"Tiruppur","state":"Tamil Nadu","intrest":"Question paper evaluation","mobile":"","email":"[email protected]","password":"jaya","subject":"Computer Networks"},{"id":"2","name":"jaya","dob":"","age":"21","gender":"","department":"16\/03\/1995","area":"Nuclear Medicine Technology Course","institution":"Park College of Technology ","city":"","state":"","intrest":"","mobile":"","email":"[email protected]","password":"jaya","subject":""},{"id":"3","name":"jaya","dob":"","age":"21","gender":"","department":"16\/03\/1995","area":"Nuclear Medicine Technology Course","institution":"Park College of Technology ","city":"","state":"","intrest":"","mobile":"","email":"[email protected]","password":"jjjj","subject":""}]
newtab.json
[{"Department":"Arts","course":"B.A. English"}, {"Department":"Arts","course":"B.A. English (Computer Applications)"}, {"Department":"Arts","course":"B.A. Economics"}, {"Department":"Arts","course":"B.A. History"}, {"Department":"Arts","course":"B.A. Political Science"}, {"Department":"Arts","course":" B.A. Tamil "}, {"Department":"Arts","course":"B.Lit. Tamil "}]
In my controller, on line 5, I retrieve the value of the clicked item and store it in a variable named "course". I need this variable to properly filter the results in my HTML code. Although I have written filtering syntax in my HTML file, it does not produce the desired result.