Search code examples
javascriptangularjsangularjs-material

AngularJS Material - No data in select drop down

I want to populate a drop down in Material (AngularJS) but I do not receive any data in my dropdown on click of the dropdown. I have checked the api and get data back.

However, in browser I do not see any data in my users scope property. What am I doing wrong?

API Snippet (Two Entries Shown)

[{
        "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);
}]);

Controller

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;

}]);

Template

<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 In Header

 <link rel="stylesheet" href="/app/css/angular-material/angular-material.min.css">

Right before closing body tag

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

  • I needed to return $http.get from $scope.init function.

    $scope.init = function()
{
      return $http.get('api/users').then(function(response){
           $scope.users = response.data;
           return response.data;
      });  
}

    Controller

    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;

}]);

    Template

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