角度材料 md-select - 无法打开选定用户的框答案

【问题标题】：Angular material md-select - cant open the box with selected user角度材料 md-select - 无法打开选定用户的框
【发布时间】：2017-02-05 10:55:54
【问题描述】：

您好，选择框显示所选项目，但我根本无法打开下拉菜单我在 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>

【问题讨论】：

我也遇到过这个问题。你的角度版本是多少？

标签： css angularjs angular-material md-select

【解决方案1】：

你不需要ng-model-options="{trackBy: '$value.id'}"

演示

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

【讨论】：

嗨，它不适合我。我使用 $mdpanel 时所做的完全一样，并且表单在对话框中。当我单击我在 html 中看到的选择时。 "area-expend" 将 ti 变为 true 并立即变为 false

【解决方案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>

检查你的 Angular 版本应该是 1.5.9

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

【讨论】：

我的版本是1.510
感谢它的很多工作你知道为什么我不能关闭框外的选择吗？在模态上
这是正常行为。当您在选择框外单击时，它会关闭
- 抱歉，我的意思是我无法在面板对话框中关闭它stackoverflow.com/questions/42052162/…
不知道原因