Question

我正在设置从控制器上下拉角材料的默认值。到目前为止我得到了这个：

<md-select ng-model="$ctrl.selected.displayType" ng-change="$ctrl.getDisplayType($ctrl.selected.displayType)">
    <md-option ng-repeat="display in $ctrl.displayTypes" ng-value="display">{{display.Name }}</md-option>
</md-select>


var self = this;
self.displayTypes = [{ "Name": 'All' }, { "Name": 'Active' }, { "Name": 'Non Active' }];

self.display = { "Name": 'All' };

Answer 1

将selected.displayType变量设置为数组的引用，如此

var self = this;
self.displayTypes = [{ "Name": 'All' }, { "Name": 'Active' }, { "Name": 'Non Active' }];

self.selected.displayType= self.displayTypes[0]

已编辑

我做了一些改动，以使这项工作。检查它是否与您的要求兼容

＆＃13;

angular.module("app",[])
.controller("appctrl",function($scope){

var self = this;
self.displayTypes = [{ "Name": 'All' }, { "Name": 'Active' }, { "Name": 'Non Active' }];

self.selected = self.displayTypes[0].Name;

})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appctrl as ctrl">
 <select ng-model="ctrl.selected" ng-change="ctrl.getDisplayType(ctrl.selected)" >
    <option ng-repeat="display in ctrl.displayTypes" value="{{display.Name}}">{{display.Name }}</option>
</select>

{{ctrl.selected }}
</div>

＆＃13;

Answer 2

浏览md-select object equality。

因此，根据角度材料文档，我们应该在ng-model-options中指定一个唯一的跟踪键来解决问题。
ng-model-options="{trackBy: '$value.Name'}

angular.module('BlankApp', ['ngMaterial']);

angular
  .module('BlankApp')
  .controller('AppCtrl', function() {
    var self = this;
    self.displayTypes = [{
      "Name": 'All'
    }, {
      "Name": 'Active'
    }, {
      "Name": 'Non Active'
    }];

    //setting the default value
    self.$onInit = function() {
      self.selected = {};
      self.selected.displayType = self.displayTypes[0];
    };

  });

<html lang="en">

<head>
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>

<body ng-app="BlankApp" ng-cloak>
  <div ng-controller="AppCtrl as $ctrl" class="md-padding selectdemoBasicUsage" ng-cloak="" layout="column" ng-app="MyApp">
    <div layout="row">
      <md-input-container>
        <label>State</label>
        <md-select ng-model="$ctrl.selected.displayType" ng-change="$ctrl.getDisplayType($ctrl.selected.displayType)" ng-model-options="{trackBy: '$value.Name'}">
          <md-option ng-repeat="display in $ctrl.displayTypes" ng-value="display">{{display.Name }}</md-option>
        </md-select>
      </md-input-container>
    </div>
  </div>
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

</body>

</html>

从控制器

2 个答案: