我想用数据库中的数据填充我的选项字段。 我在控制台中收到错误：
Error: [$compile:ctreq] Controller 'select', required by directive 'ngOptions', can't be found!
我知道 Json 正确发送了我的数据，因为我在这样做时看到了输出：myaddress.com/forms/usersDB.php?action=get_Logins_info
输出：
[{"id"："1"，"name"："John"}，{"id"："2"，"name"："Julia"}]
角度功能：
$scope.ChooseLogins = [];
$scope.getLogins = function () {
$http.get('forms/usersDB.php?action=get_Logins_info').then(function (data, status, headers, config) {
$scope.chooseLogins = data;
console.log('Retrieved data from server');
console.log(data);
}).then(function (data, status, headers, config) {
console.log("Error in retrieving data from server");
console.log(data, status);
});
};
$scope.getLogins();
.HTML：
<md-select ng-model="getLogins" ng-options="logins.id for logins in chooseLogins">
<md-option value="{{logins.id}}">{{logins.name}}</md-option>
</md-select>
如注释中所述，您不能对任何其他元素使用ng-options，除了<md-select>不是<select>，建议在文档中对<md-options>使用ng-repeat。例
<md-select ng-model="login">
<md-option ng-repeat="logins in chooseLogins" ng-value="logins.id">{{logins.name}}</md-option>
</md-select>
要使你没有空选项，你需要将模型设置为等于数组中的第一个id。另请注意，您的模型与函数同名，您需要更改此设置。
这里有一个小提琴来向您展示如何做到这一点。
对于您的代码，将其更改为此
$scope.getLogins = function () {
$http.get('forms/usersDB.php?action=get_Logins_info').then(function (response, status, headers, config) {
$scope.chooseLogins = response.data;
$scope.login = $scope.chooseLogins[0].id;
console.log('Retrieved data from server');
console.log(data);
}).then(function (data, status, headers, config) {
console.log("Error in retrieving data from server");
console.log(data, status);
});
};
另外，您可能希望在设置之前检查返回的数据的长度。
Use ng-repeat.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="style.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.9/angular-material.js"></script>
<script>
(function () {
'use strict';
angular
.module('MyApp', ['ngMaterial'])
.controller('AppCtrl', function($interval, $mdDialog) {
var vm = this;
vm.chooseLogins = [{"id":"1","name":"John"},{"id":"2","name":"Julia"}];
});
})();
</script>
</head>
<body>
<div ng-controller="AppCtrl as ctrl"
ng-app="MyApp"
>
<p>{{ctrl.chooseLogins}}</p><br>
<md-input-container>
<label>Choose name...</label>
<md-select ng-model="getLogins">
<md-option ng-repeat="logins in ctrl.chooseLogins" ng-value="logins.id">{{logins.name}}</md-option>
</md-select>
</md-input-container>
<p>{{getLogins}}</p>
</div>
</body>
</html>