0

Hi the selectbox is show the selected item but i cant open the dropdown at all I am using form in the mdpanel its not working in dialog on mdpanel how can i fix it

i need form with edit user and i need select box that initialize with one of the user param

  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>
Scopi
  • 663
  • 1
  • 6
  • 21

2 Answers2

1

You do not need to have 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>
Sajeetharan
  • 216,225
  • 63
  • 350
  • 396
  • Hi its not working for me . i did exctly the same i am using $mdpanel and the form is in the dialog . when i click on the select i see in html . "area-expend" change ti true and immediately to false – Scopi Feb 05 '17 at 11:25
1

To make your select box initially load the selected item

Keep your code as it is 

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

Check your Angular version it should be <= 1.5.9

Demo http://codepen.io/anon/pen/EZRwaQ?editors=1010

Salih Şenol Çakarcı
  • 2,320
  • 13
  • 23