AngularJS Material - Нет данных в выпадающем списке - PullRequest
Новая
       11

AngularJS Material - Нет данных в выпадающем списке

0 голосов
/ 24 апреля 2019

Я хочу заполнить раскрывающийся список в материале (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;

}]);

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 в заголовке 

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

Ответы [ 3 ]

0 голосов
/ 24 апреля 2019

В вашей initUsers функции: 

$scope.initUsers = function() {
    $http.get('api/users').then(function(result) {
        $scope.users = result.data;
    });
}
0 голосов
/ 25 апреля 2019

Мне нужно было вернуть $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;

}]);

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>
0 голосов
/ 24 апреля 2019

Потребовались две функции, init и populateUserList (который возвращает тайм-аут). В моем раскрывающемся списке теперь есть данные по щелчку при вызове init для извлечения данных перед щелчком.

Шаблон (удален как 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;

}]);
...