我想填充Material（AngularJS）的下拉列表，但是单击该下拉列表后，我的下拉列表中没有任何数据。我已经检查了api并获取了数据。
但是，在浏览器中，我的用户scope属性中没有看到任何数据。我在做什么错了？
API代码段（显示两个条目）
[{
"userid": "2",
"title": "Software Engineer",
"phone": "123-456-7890",
"extension": "1234",
"firstname": "fname",
"lastname": "lname",
"name": "lname, fname"
},
{
"userid": "3",
"title": "Software Engineer",
"phone": "123-456-7890",
"extension": "1234",
"firstname": "fname",
"lastname": "lname",
"name": "lname, fname"
}]
app.js
angular.module('Home', []);
angular.module('Action', ['datatables', 'datatables.scroller', 'ngResource']);
angular.module('Risk', ['datatables', 'datatables.scroller', 'ngResource']);
var app = angular.module('Main', ['ui.router', 'oc.lazyLoad', 'datatables', 'ngResource', 'ngMaterial', 'Home', 'Action', 'Risk']);
app.controller('MainController', ['DTOptionsBuilder']);
app.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider', function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider){
configRoutes($stateProvider, $urlRouterProvider, $ocLazyLoadProvider);
}]);
控制器
angular.module('Action').config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
}]).controller('CreateActionController', ['$http', '$resource', '$scope', '$state', '$timeout', function($http, $scope){
$scope.users = null;
$scope.user = null;
$scope.initUsers = function(){
$scope.users = $http.get('api/users').then(function(result){
return result.data;
});
}
this.minDate = new Date();
this.myDate = new Date();
this.isOpen = false;
}]);
模板
<md-content ng-controller="CreateActionController as ctrl" layout-padding="" ng-cloak="" ng-app="Action">
<div layout-gt-xs="row">
<div flex-gt-xs>
<md-select placeholder="Assign to user" ng-model="ctrl.user" md-on-open="initUsers()" style="min-width: 200px;">
<md-option ng-model="ctrl.user" ng-repeat="user in ctrl.users">{{user.name}}</md-option>
</md-select>
</div>
<div flex-gt-xs>
<h6>Opening the calendar when the input is focused</h6>
<md-datepicker ng-model="ctrl.myDate" md-min-date="ctrl.minDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
</div>
</div>
</md-content>
index.html 在标题中
<link rel="stylesheet" href="/app/css/angular-material/angular-material.min.css">
即将关闭正文标签
<script src="/app/js/angularjs-1.6.6/angular.js"></script>
<script src="/app/js/jquery-slim-3.2.1/jquery-3.2.1.slim.min.js"></script>
<script src="/app/js/angular-material-1.1.12/angular-material.min.js"></script>
<script src="/app/js/popper-1.12.9/popper.min.js"></script>
<script src="/app/js/bootstrap-4.0.0/bootstrap.min.js"></script>
<script src="/app/js/jquery-datatables-1.10.19/jquery.dataTables.min.js" ></script>
<script src="/app/js/datatables-fixedheader-3.1.5/dataTables.fixedHeader.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/angular-datatables.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/plugins/scroller/angular-datatables.scroller.min.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-route.min.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-ui-router.js"></script>
<script src="/app/js/angularjs-1.6.6/statehelper.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-resource.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-aria.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-animate.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-messages.js"></script>
<script src="/app/js/ocLazyLoad/ocLazyLoad.js"></script>
<script src="/app/route-config.js"></script>
<script src="/app/app.js"></script>
答案 0 :(得分：0)
需要两个函数，init和populateUserList（返回超时）。现在，我的下拉菜单中有onclick数据，调用了init来在单击之前获取数据。
模板（已删除“ as ctrl”，并且删除了模板中范围变量前面的所有ctrl）
<md-content ng-controller="CreateActionController" ng-init="init()" ng-app="Action" layout-padding="" ng-cloak="">
<div layout-gt-xs="row">
<div flex-gt-xs>
<md-select placeholder="Assign to user" ng-model="users" md-on-open="populateUserList()" style="min-width: 200px;"/>
<md-option ng-model="user" ng-value="user" ng-repeat="user in users track by user.userid">{{user.name}}</md-option> <!-- track by user.userid is needed -->
</md-select>
</div>
<div flex-gt-xs>
<h6>Opening the calendar when the input is focused</h6>
<md-datepicker ng-model="myDate" md-min-date="minDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
</div>
</div>
</md-content>
控制器
angular.module('Action').config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
}]).controller('CreateActionController', ['$http', '$resource', '$scope', '$state', '$q', '$timeout', function($http, $resource, $scope, $state, $q, $timeout){
$scope.users = {};
$scope.user = {};
$scope.usr = {};
function getUsers()
{
return $http.get('api/users').then(function(response){
return response.data;
});
}
$scope.init = function()
{
getUsers().then(function(data){
$scope.usr = data;
});
}
$scope.populateUserList = function(){
return $timeout(function() {
$scope.users = $scope.usr;
}, 0);
}
this.minDate = new Date();
this.myDate = new Date();
this.isOpen = false;
}]);
答案 1 :(得分：0)
在您的initUsers函数中：
$scope.initUsers = function() {
$http.get('api/users').then(function(result) {
$scope.users = result.data;
});
}
答案 2 :(得分：0)
我需要从$http.get函数中返回 $scope.init。
$scope.init = function()
{
return $http.get('api/users').then(function(response){
$scope.users = response.data;
return response.data;
});
}
控制器
angular.module('Action').config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
}]).controller('CreateActionController', ['$http', '$resource', '$scope', '$state', '$q', '$timeout', function($http, $resource, $scope, $state, $q, $timeout){
$scope.users = {};
$scope.user = {};
$scope.usr = {};
$scope.init = function()
{
return $http.get('api/users').then(function(response){
$scope.users = response.data;
return response.data;
});
}
this.minDate = new Date();
this.myDate = new Date();
this.isOpen = false;
}]);
模板
<md-content ng-controller="CreateActionController" ng-init="init()" ng-app="Action" layout-padding="" ng-cloak="">
<div layout-gt-xs="row">
<div flex-gt-xs>
<md-select placeholder="Assign to user" ng-model="users" style="min-width: 200px;"/>
<md-option ng-model="user" ng-value="user" ng-repeat="user in users track by user.userid">{{user.name}}</md-option>
</md-select>
</div>
<div flex-gt-xs>
<h6>Opening the calendar when the input is focused</h6>
<md-datepicker ng-model="myDate" md-min-date="minDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
</div>
</div>
</md-content>