Question

这里我想使用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>

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

Answer 2

如果在最后一个对象之后看到额外的json，则json出错。下面标记为粗体，名称应该像“名称”。

输出：{“记录”：[{姓名：“Reena”}，{姓名：“Diya”}，{姓名：“新”}，{姓名：“New1”}，{姓名：“Diya”} ，{姓名：“Sonali”}，{姓名：“Sonali”}，{姓名：“Sonali”} ，]}

建议：

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

Answer 3

您完成的错误是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>

Answer 4

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

更改您的PHP，使其使用name代替Name。

您的PHP代码实际上是一种创建所需JSON字符串的错误方法：

有一个名为json_encode的函数，它将Value转换为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"}]}

Answer 5

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

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

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

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

6 个答案: