Angular ng-options 显示数据库中的数据

Question

EDIT : The code its ok, the problem was materialize select, did not work with dynamic angular elements, use the class browser-default instead of input-field and do not inizializate with jquery.

您好，我正在尝试使用 angular 在 select 标签中显示数据我读了很多，但我无法解决这个问题。如您所见，测试代码有效，但函数无效。需要帮忙。谢谢。

这是 JSON 那个 PHP 端点 returns:

{
   "records":[
      {
         "numero":"312312"
      },
      {
         "numero":"31221111"
      },
      {
         "numero":"311241"
      },
      {
         "numero":"112441"
      },
      {
         "numero":"11312"
      },
      {
         "numero":"131"
      }
   ]
}

控制器：

 app.controller('chequeoCtrl', function($scope, $http) {
   //with this function do not work
   $scope.leerNumero = function() {
     $http.get("objetos/autoelevador/leer_numero.php").success(function(response) {
       $scope.data = response.records;
       console.log($scope.data);
     });
   };
   $scope.leerNumero();

   // with this array works, just for test!!
   /*$scope.names = [{"name":"pepe"},{"name":"pepe2"}];
   console.log($scope.nombres); */
 })

我的 select 标签：

<select  ng-model="autoelev" ng-options="item.numero as item.numero for item in data">
  <option value="" disabled selected>Seleccionar autoelevador</option>
</select>

Answer 1

根据 $http 文档，您的响应对象有一个数据属性用于存储您的数据 (https://docs.angularjs.org/api/ng/service/$http)

所以你应该使用

$scope.data = response.data.records;

成功功能也已弃用。请使用

 $http.get("objetos/autoelevador/leer_numero.php").then(

Answer 2

尝试下面的代码，Demo here：

查看：

<body ng-controller="MainCtrl">
  <select ng-options="item.numero for item in data" ng-model="chosen">
      <option value="" disabled selected>Seleccionar autoelevador</option>
  </select>
</body>

控制器：

angular.module('app', [])
  .controller('MainCtrl', function($scope, $http) {
    $http.get('data.json')
      .then(function(res) {
        $scope.data = res.data.records;
        console.log($scope.data);
      });
  })

在您的控制器中执行 $scope.data = response.data.records 并确保它是一个选项数组。

console.log($scope.data) 在你的控制器中应该打印如下：

[{"numero":"312312"},{"numero":"31221111"},{"numero":"311241"},{"numero":"112441"},{"numero":"11312"},{"numero":"131"}

Answer 3

您可以使用 angularjs 从数据库中 select 数据。

// Application module
var App = angular.module('myApp',[]);
App.controller("DbController",['$scope','$http', function($scope,$http){

// Function to get details from the database
getInfo();
function getInfo(){
// Sending request to sample.php files
$http.post('databaseFiles/sample.php').success(function(data){
// Stored the returned data into scope
$scope.details = data;
});
}

Details.php.

<?php
// Including database connections
require_once 'database_connections.php';
// mysqli query to fetch all data from database
$query = "   ";//write your select query
$result = mysqli_query($con, $query);
$arr = array();
if(mysqli_num_rows($result) != 0) {
while($row = mysqli_fetch_assoc($result)) {
$arr[] = $row;
}
}
// Return json array containing data from the databasecon
echo $json_info = json_encode($arr);
?>

Angular ng-options 显示数据库中的数据

Angular ng-options display data from database

select

json

options

angularjs