如何在angularjs中从数据库mysql加载动态记录？答案

【问题标题】：How to load dynamic record from database mysql in angularjs?如何在angularjs中从数据库mysql加载动态记录？
【发布时间】：2017-06-03 06:55:43
【问题描述】：

这里我想使用 Angular 在选择框中加载数据库用户。

<div ng-app="myapp" ng-controller="myctrl" class="centered">
  <label>Select User</label>
    <select ng-model="selectedItem" ng-options="item.name for item in list">
        <option value="">-- choose --</option>
    </select>
     <h2>Selected:</h2>
        {{selectedItem.name}}
</div>
<script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myctrl', function($scope, $http) {
$http({
    method : "GET",
    url : "http://localhost/demo/angular/getdata.php"
}).then(
function (response) {
   $scope.list = response.data.records;
});
});
</script>

【问题讨论】：

我使用了 Angular 版本 2
输出 : {"records":[{Name : "Reena"},{Name : "Diya"},{Name : "New"},{Name : "New1"},{Name : "Diya"},{Name : "Sonali" },{Name : "Sonali"},{Name : "Sonali"},]}
PHP 中没有返回参数，使用“return $outp”然后再试一次，你使用的角度 1 不是角度 2。
您的命令似乎您使用的是 angular 1.x 而不是 2.x
是角度 1.8

标签： javascript php mysql angularjs

【解决方案1】：

它完全依赖于后端。如果后端是 RESTFull 服务，那么很容易从服务器获取数据并填写表格。

顺便说一句，从后端获取数据与编程语言无关。这是Java+Angularjs中的一个例子

https://spring.io/guides/gs/consuming-rest-angularjs/

这是一个展示如何在 PHP 中实现 RESTFull API 的示例：

https://www.leaseweb.com/labs/2015/10/creating-a-simple-rest-api-in-php/

【讨论】：

【解决方案2】：

如果在最后一个对象之后看到 extra ，则 json 中的错误。下面标记为粗体，名称也应类似于“名称”。

输出 : {"records":[{Name : "Reena"},{Name : "Diya"},{Name : "New"},{Name : "New1"},{Name : "Diya"} ,{Name : "Sonali" },{Name : "Sonali"},{Name : "Sonali"},]}

建议：

为什么要使用 cocatenate 字符串来形成 json。您可以使用 json_encode 数组。

【讨论】：

【解决方案3】：

这是因为您的 JSON 数组使用 Name 而您的 ng-options 使用 name。

更改您的 PHP，使其使用 name 而不是 Name。

您的 PHP 代码确实是创建所需 JSON 字符串的一种糟糕方式：

有一个名为json_encode 的函数会将值转换为 JSON 表示形式。

您可以使用stdClass 来保存您的信息并将结构转换为 JSON 字符串：

$personArray = array();
while($r = mysqli_fetch_row($sel)) {
    $person = new stdClasS();
    $person->name = $r[0];

    $personArray[] = $person;
}

$results = new stdClass();
$results->records = $personArray;

echo json_encode($results); // {"records":[{"name":"Stephen"},{"name":"Jane"},{"name":"Sam"}]}

【讨论】：

如果您导航到localhost/demo/angular/getdata.php，您会看到什么？另外，如果您刚刚使用 {{list}}，您会看到您的 json 结果吗？很难确定到底是什么问题
我刚刚在您的代码中发现了一个错字。我已经更新了答案
输出数组：["Reena","Diya","New","New1","Diya","Sonali","Sonali","Sonali"]

【解决方案4】：

希望这会对您有所帮助。在这里创建了一个演示：

<!DOCTYPE html>
<html>
<head>
    <title>Demo for select box, AngularJS</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

</head>
<body>

       <div ng-app="myapp" ng-controller="myctrl" class="centered">
        <label>Select User</label>
      <!-- use item.Name instead of item.name as per JSON structure -->
        <select ng-model="selectedItem" ng-options="item.Name for item in list">
            <option value="">-- choose --</option>
        </select>
        <h2>Selected:</h2>
        {{selectedItem.Name}}
    </div>
    <script type="text/javascript">
        var app = angular.module('myapp', []);
        app.controller('myctrl', function($scope, $http) {

           // Assuming you're getting list from API in below format as per your sample JSON provided in a comment
            $scope.list = {"records":[{Name : "Reena"},{Name : "Diya"},{Name : "New"},{Name : "New1"},{Name : "Diya"},{Name : "Sonali" },{Name : "Sonali"},{Name : "Sonali"},]};

            // update list variable as your sample JSON has records field but in html you're using without it
            $scope.list = $scope.list.records;

            /*
            $http({
                method : "GET",
                url : "http://localhost/demo/angular/getdata.php"
            }).then(function(response) {
                $scope.list = response.data.records;
            });
            */
        });
    </script>

</body>
</html>

Working Fiddle link here

【讨论】：

我想从数据库中加载用户名
@ReenaMori：您能否清除一下您在 AJAX 回调下（即在 $http => 然后回调函数下）从数据库获得的输出（response.data.records）？
输出数组：["Reena","Diya","New","New1","Diya","Sonali","Sonali","Sonal‌‌i"]跨度>
没有时间更新。这是根据您修改后的 JSON 输出更新的 Fiddle：jsfiddle.net/sanmax/36axutzu/2
我想加载这个 ["Reena","Diya","New","New1","Diya","Sonali","Sonali","Sonal‌‌‌i" ] 来自数据库不是静态的

【解决方案5】：

你犯的错误是，item.name 在你的 JSON 你有 item.Name 重命名它。它会工作的

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<body>
<div ng-app="myapp" ng-controller="myctrl" class="centered">
  <label>Select User</label>
    <select ng-model="selectedItem" ng-options="item.Name for item in list">
        <option value="">-- choose --</option>
    </select>
     <h2>Selected:</h2>
        {{selectedItem.Name}}
</div>
    <script type="text/javascript">
        var app = angular.module('myapp', []);
        app.controller('myctrl', function($scope, $http) {
            $scope.list = {"records":[{Name : "Reena"},{Name : "Diya"},{Name : "New"},{Name : "New1"},{Name : "Diya"},{Name : "Sonali" },{Name : "Sonali"},{Name : "Sonali"},]};
            $scope.list = $scope.list.records;
            /* replace it with your request data
            $http({
                method : "GET",
                url : "http://localhost/demo/angular/getdata.php"
            }).then(
            function (response) {
               $scope.list = response.data.records;
            });
            */
        });
    </script>

</body>
</html>

【讨论】：

我使用了 ng-option 而不是 ng-repeat 因为 ng-repeat 指令为数组中的每个项目重复一段 HTML 代码，所以它可以用来在下拉列表中创建选项，但是ng-options 指令专门用于用选项填充下拉列表。
没有得到你所需要的。你想加载选项还是阻止？您的代码有选项。所以你想根据下拉选择加载数据？
我想要加载选项
在您的 JSON 中，您的“姓名”是大写字母，但您使用的是“姓名”。重命名它会起作用
输出数组：["Reena","Diya","New","New1","Diya","Sonali","Sonali","Sonal‌i"]

【解决方案6】：

<!DOCTYPE html>
<html>
<head>
<title>Dynemic Select box</title>   
<!---load css-->
<link href="css/style.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<!---load js-->
<script src="js/jquery-2.1.4.min.js" type="text/Javascript" ></script>
<script src="js/bootstrap.js" type="text/Javascript" ></script>
<script src="js/angular.min.js" type="text/Javascript" ></script>
</head>
<body 
<?php 
     echo $header;
     $userdata=$this->model_user->getuser();
     $userdata =json_encode($userdata);
   ?>
 <div ng-app="myapp" ng-controller="myctrl" class="centered">
 <label>Select User</label>
 <select ng-options="x.id as x.name for x in sample" ng-model="x.id" name="selectedItem" id="selectedItem">

    <h2>Selected:</h2>
    {{selectedItem.name}}
</div>
 <script type="text/javascript">
var app=angular.module('myapp',[]);
app.controller('myctrl', function($scope) {
 $scope.sample=<?php echo $userdata;?>;
});
</script>
</body>
</htnl>

【讨论】：