if my table has two columns: user_id
and script_name
, and i have two dropdowns for both columns, how can i use angular to filter the content in the table to show only rows with the selected user_id/script_name/both?
my code:
<header>
//Here i create the dropdowns
<?php
include_once "dbConnect.php";
$query = "SELECT user_id FROM users";
$result = mysql_query($query); ?>
<select name="select1">
<option value="All">All</option>
<?php while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?>
<option value="<?php echo $line['user_id'];?>">
<?php echo $line['user_id'];?>
</option>
<?php } ?>
</select>
<?php
include_once "dbConnect.php";
$query = "SELECT script_name FROM scripts";
$result = mysql_query($query); ?>
<select name="select1" class="dropdown">
<option value="All">All</option>
<?php while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?>
<option value="<?php echo $line['script_name'];?>">
<?php echo $line['script_name'];?>
</option>
<?php } ?>
</select>
</header>
//Here i create the table
<main ng-app="" ng-controller="customersController">
<table class="table table-bordered table-hover">
<thead>
<td>user name</td>
<td>script name</td>
<td>cron format</td>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.user_id}}</td>
<td>{{x.script_name}}</td>
<form action="index.php" method="get">
<td>
<span contenteditable="true"><input type="text" placeholder="{{x.cron_format}}"></span><input class="save" type="submit" value="save">
</td>
</form>
</tr>
</tbody>
</table>
//script to get data from the server as json
<script>
function customersController($scope,$http) {
$http.get("getData.php")//getData.php return a json file
.success(function(response) {$scope.data = response;});
}
</script>