AngularJS Material - 选择下拉列表中没有数据

Question

我想在 Material (AngularJS) 中填充一个下拉列表，但单击下拉列表时我的下拉列表中没有收到任何数据。我已经检查了 api 并取回了数据。

但是，在浏览器中，我的用户范围属性中看不到任何数据。我做错了什么？

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>

Answer 1

需要两个函数，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;

}]);

Answer 2

在您的initUsers 函数中：

$scope.initUsers = function() {
    $http.get('api/users').then(function(result) {
        $scope.users = result.data;
    });
}

Answer 3

我需要从$scope.init 函数返回 $http.get。

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