Angular ng-options 显示来自数据库的数据答案

【问题标题】：Angular ng-options display data from databaseAngular ng-options 显示来自数据库的数据
【发布时间】：2016-11-15 05:04:35
【问题描述】：

编辑：代码没问题，问题是materializeselect，不适用于动态角度元素，使用class browser-default而不是input-field，不要初始化使用 jquery。

您好，我正在尝试在带有角度的 select 标记中显示数据我读了很多，但我无法解决这个问题。正如您所看到的，测试代码有效，但函数无效。需要帮忙。谢谢。

这是 PHP 端点返回的 JSON：

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

【问题讨论】：

标签： angularjs json select options

【解决方案1】：

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

所以你应该使用

$scope.data = response.data.records;

success 函数也被弃用了。请使用

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

【讨论】：

【解决方案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"}

【讨论】：

返回的数据似乎有问题，我尝试使用具有相同数据的本地函数并且它可以工作但使用 get 函数不起作用，我不知道为什么，两个数组都是相同的我做 consle.log！
试试$scope.data = JSON.parse(response.data.records)。您的响应可能是字符串而不是 JSON。
response.data.records 我得到 TypeError: Cannot read property '3' of undefined 和 JSON.parse(response.data.records) 我在对象的位置 1 处的 JSON 中得到 Unexpected token o。用 $scope.data = response.records 解析（本机）顺便说一句；我可以正常使用 ng-repeat 问题只是 ngOptions，它似乎与外部数据问题有关，在控制器中声明的数组工作正常
这是 console.log 显示的内容 $scope.data = response.records; console.log($scope.data);[对象，对象，对象，对象，对象，对象] console.log($scope.data[3]);对象 {numero: "112441"}
请检查这张图片，我解释得更好，阅读 cmets k60.kn3.net/25C5904DF.jpg

【解决方案3】：

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

// 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);
?>

【讨论】：