php - 如何在 angular.js 中组织 sql 查询返回的列表

标签 php html mysql angularjs

如果这不是任何人见过的最好的代码,我深表歉意。我对 angular.js 有点陌生。

我的问题是这样的:当我的查询返回数据时,它只是显示为文本 block 。在search.php中,插入echo语句简单地显示echo语句的输出而不是生成代码。我似乎无法强制输出正常运行。

$data = file_get_contents("php://input");

$objData = json_decode($data);

$db = mysql_connect("xxxxxxxx", "xxxxxxxx", "xxxxxxxx") or die ("Error connecting to     database.");
mysql_select_db("Awards_New", $db) or die ("Couldn't select the database.");

$results = mysql_query('SELECT * FROM Awards WHERE AwardName LIKE "%'. $objData->data .'%"');

while($row = mysql_fetch_array($results)){
echo $row['AwardName'] . " ";
}

mysql_close($db);

html 的一些内容...

<div ng-controller="SearchCtrl">
    <form class="well form-search">
      <label>Search:</label>
      <input type="text" ng-model="keywords" class="input-medium search-query" placeholder="Keywords...">
      <button type="submit" class="btn" ng-click="search()">Search</button>
      <p class="help-block">Single words only: eg; AFS, University, Geology</p>      
    </form>
    <div ng-model="result">

            {{result}}

    </div>

</div>

还有 js...(这是我最薄弱的环节)

function SearchCtrl($scope, $http) {
$scope.url = 'search.php';
$scope.search = function() {
    $http.post($scope.url, { "data" : $scope.keywords}).
    success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
        $scope.result = data;
    })
    .
    error(function(data, status) {
        $scope.data = data || "Fail.";
        $scope.status = status;         
    });
};
}

我想做的是在检索时将数据组织到不同的行中。然而,我似乎无能为力。此时,我不确定接下来应该在哪里寻找资源和帮助的方向。

最佳答案

您可以使用ng-repeat函数来迭代查询结果的每一行。在此示例中,我使用了 <table>结构并放置了 ng-repeat <tr> 内的函数元素,但您可以使用 ng-repeat其他元素类型,例如 <div><span> , 如果你更喜欢。

<body id="ng-app" ng-app="sotest">
<div ng-controller="searchCtrl">
    <form class="well form-search">
      <label>Search:</label>
      <input type="text" ng-model="keywords" class="input-medium search-query"     placeholder="Keywords...">
      <button type="submit" class="btn" ng-click="search()">Search</button>
      <p class="help-block">Single words only: eg; AFS, University, Geology</p>      
    </form>

    <table>
        <tr> <!-- this is the column header row -->
           <th>AwardName</th>
           <th>SomeColumnName</th>
        </tr>
        <tr ng-repeat="row in result"> <!-- this tr will generate for each row in the query result-->
           <td>{{row.AwardName}}</td>
           <td>{{row.SomeColumnName}}</td>
        </tr>
    </table>
</div>
</body>

此外,我建议使用 angularJS DeferredAPI 和 Promises 来获取异步数据。您需要将 $q 注入(inject) Controller 才能执行此操作。注意我稍微重构了你的 JS 代码,将数据库调用分离到一个函数中。

<script type="text/javascript" src="http://code.angularjs.org/1.0.8/angular.min.js"></script>

<script type="Text/javascript" >
var app = angular.module('sotest', []);

app.controller('searchCtrl',['$scope','$http','$q', function SearchCtrl($scope, $http, $q) {

    $scope.search = function(){
        $scope.result = $scope.fetchData();        
    }

    $scope.fetchData= function() {
      $scope.url = 'index.php';
      var deferred = $q.defer();
      $http.post($scope.url).
      success(function(data, status) {
          deferred.resolve(data) 
      })
      .
      error(function(data, status) {    
          deferred.reject('An unexpected error has occurred');
      });
      return deferred.promise; //return the data
  };

  }]);
</script>

我修改了您的 PHP 以返回 JSON 编码的数组,并将 $db 连接添加到您的 mysql_query 行:

$data = file_get_contents("php://input");

$objData = json_decode($data);

$db = mysql_connect("xxxxxxxx", "xxxxxxxx", "xxxxxxxx") or die ("Error connecting to     database.");
mysql_select_db("Awards_New", $db) or die ("Couldn't select the database.");

$results = mysql_query('SELECT * FROM Awards WHERE AwardName LIKE "%'. $objData->data .'%"', $db);

$array_result = array();
while($row = mysql_fetch_array($result)){    
  $array_result[] = $row;
}
echo json_encode($array_result);

mysql_close($db);

您可以在此处阅读有关 $q 和延期 promise 的更多信息:http://docs.angularjs.org/api/ng.$q

关于php - 如何在 angular.js 中组织 sql 查询返回的列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18837467/

相关文章:

php - 如何在 PHP 中显示取决于用户输入的长查询的 MySQL 错误?

php - 在 apache 中限制从 Internet 访问

javascript - 如何在内联 onclick 事件中调用两个 javascript 函数?

mysql - sql查询以获取最大日期比较当前记录日期的值

mysql - 比较mysql中从unix格式转换后的两个日期

php - 如何按列值对子数组进行分组?

php - Laravel 本地化字符串中的参数

javascript - 在不使用jquery的情况下将g标签添加到svg标签中

javascript - 使用 JavaScript 在 HTML 中提交多个表单

java - Android项目连接WampServer的IP地址是多少?