Jayson Jayson - 5 months ago 9
JSON Question

Filtering Table Using Json in Angular js

i would like to ask if it is possible to put a filter in this simple table code using Json in angular form? I am new in Angular and Json. Hope someone can get me out of this problem. the filter will base on the Event,Like if you select the Name John Drake , it will remove the names left. and it will show up the match names as you select and the following description in the selected name like account place and activity in a table , Any suggestion guis? hope someone can help me figure out,my 1 week trial and error.

table.html

<!DOCTYPE html>
<html ng-app="myTable">
<head>
<title>project 43</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"></script>
<script type="text/javascript">
var myTable=angular.module('myTable',[]);
myTable.controller('tableCtrl',function($scope,$http){
$http.get("Table.json").success(function(response) {
debugger
$scope.members=response.events;
$scope.totals = response.paging;
});

});
</script>
</head>
<body ng-controller="tableCtrl">

<th colspan="7" style="text-align:right">
<i class="fa fa-search">search <select ng-model="searchObj.Table" ng-options="item.Table as item.Event for item in filtertable"> <option value="">--Select--</option> </select> </i></th>

<table id="filtertable"border="5">
<tr>
<th>Event</th>
<th>Account Shop</th>
<th>Place</th>
<th>Activity</th>
</tr>

<tr ng-repeat="member in members">
<td>

{{member.Event.name}}<br>
{{member.Event.id}}<br>
{{member.Event.date_start}}<br>
{{member.Event.date_end}}<br>


<td>
{{member.AccountShop.id}}<br>
{{member.AccountShop.name}}<br>
{{member.AccountShop.short_code}}<br>
</td>

<td >
<div ng-repeat="Place in member.Place">
{{Place.id}}<br>
{{Place.name}}<br>
{{Place.lk_country_code}}<br>
</div>
</td>

<td>
<div ng-repeat="Activity in member.Activity">
{{Activity.id}}<br>
{{Activity.short_description}}
</div>

</td>
</table>
</body>
</html>


Table.json

{
"events": [
{
"Event": {
"name": "John Drake",
"id": "59",
"date_start": "Start 2007-07-06 ",
"date_end": "End 2007-07-08 "
},
"AccountShop": {
"id": "1",
"name": "Bike Pte",
"short_code": "GILL"
},
"Place": [
{
"id": "537",
"name": "Was",
"lk_country_code": "MY"
}
],
"Activity": [
{
"id": "5671",
"short_description": "Bike\r\n"
}
]
},
{
"Event": {
"name": "Paul Smith",
"id": "60",
"date_start": "Start2007-07-13",
"date_end": "Start 2007-07-15 "
},
"AccountShop": {
"id": "1",
"name": "Run Pte",
"short_code": "GILL"
},
"Place": [
{
"id": "537",
"name": "Cal",
"lk_country_code": "MY"
}
],
"Activity": [
{
"id": "234",
"short_description": "Run\r\n"
}
]
},
{
"Event": {
"id": "61",
"name": "Thomas Dale",
"date_start": "Start 2007-07-20 ",
"date_end": "End 2007-07-22 "
},
"AccountShop": {
"id": "1",
"name": "Dive Pte",
"short_code": "JILE"
},
"Place": [
{
"id": "47",
"name": "Hou",
"lk_country_code": "MA"
}
],
"Activity": [
{
"id": "123",
"short_description": "Dive\r\n"
}
]
}
]
}

Answer

With an input type text :

<input type="text" name="nom" ng-model="search.Event.name" />

And in u're ng-repeat

<tr ng-repeat="member in members | filter:search track by $index ">

don't forget the track by $index when u're filtering or ordering.