0

嗨，选择框显示所选项目，但我根本无法打开下拉列表我在 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>
4

2 回答 2

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>

于 2017-02-05T11:01:16.110 回答
1

使您的选择框最初加载所选项目

保持您的代码原样

<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

于 2017-02-05T11:25:09.630 回答