使用angularJS和下拉列表更新表中的内容

时间:2015-02-08 13:13:11

标签: javascript php mysql angularjs

如果我的表有两列:user_idscript_name,我有两个下拉列,我如何使用angular来过滤表中的内容,只显示所选的行USER_ID / SCRIPT_NAME /二者?

我的代码:

<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>

0 个答案:

没有答案