Угловой материал md-select - не могу открыть окно с выбранным пользователем

Привет окно выбора показать выбранный элемент, но я не могу открыть раскрывающийся список на всех, я использую форму в mdpanel, она не работает в диалоге на mdpanel, как я могу это исправить

мне нужна форма с правкой пользователя, и мне нужно выбрать поле, которое инициализируется с одним из параметров пользователя

  users :[
            { id: 1, name: 'Bob' },
            { id: 2, name: 'Alice' },
            { id: 3, name: 'Steve' }
          ],
         selectedUser : { id: 1, name: 'Bob' }

HTML:

   <md-select ng-model="ctrl.selectedUser" ng-model-options="{trackBy: '$value.id'}">
          <md-option ng-value="user" ng-repeat="user in ctrl.users">{{ user.name }}</md-option>
        </md-select>
Источник

2 ответа

Чтобы сделать ваше поле выбора изначально загрузите выбранный элемент

Сохраняйте код как есть

<md-select ng-model="ctrl.selectedUser" ng-model-options="{trackBy: '$value.id'}">
  <md-option ng-value="user" ng-repeat="user in ctrl.users">{{ user.name }}</md-option>
</md-select>

Проверьте вашу угловую версию, она должна быть <= 1.5.9

Демо- http://codepen.io/anon/pen/EZRwaQ?editors=1010

Источник

Вам не нужно иметь ng-model-options="{trackBy: '$value.id'}"

DEMO

// Code goes here


var app = angular.module('app', ["ngMaterial"]);

app.controller('myCtrl', function($scope) {
      $scope.users  =[
            { id: 1, name: 'Bob' },
            { id: 2, name: 'Alice' },
            { id: 3, name: 'Steve' }
          ];
       $scope.selectedUser = { id: 1, name: 'Bob' };
      
  
});
<!DOCTYPE html>
<html ng-app="app">

<head>
  <link rel="stylesheet" href="style.css" />
  <link data-require="angular-material@0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script data-require="angular-material@0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
  <script data-require="angular-animate@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
  <script data-require="angular-aria@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
  <div layout="row">
    <md-select placeholder="Select" ng-model="selectedUser">
      <md-option ng-repeat="user in users" value="{{user.name}}">
        {{user.name}}
      </md-option>
    </md-select>
  </div>
</body>

</html>

Источник
Другие вопросы по тегам