设置角材料从控制器下拉默认值

我试图从controller.So设置角料滴的默认值向下到目前为止，我得到这个：设置角材料从控制器下拉默认值

<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' };

来源

2017-03-16 Lio

您应该使用'NG-模型options'和'trackBy'指定默认值。看我的[回复]（http://stackoverflow.com/a/42832848/3543808） –

设置selected.displayType变量作为参考的形式这样

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

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

编辑

阵列我为了使这项工作做了一些改动。检查它是否与您的需求

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; 
 

 
})

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

来源

2017-03-16 10:16:34

谢谢，但我不工作 – Lio

@Lio检查更新的答案 –

@sachilaranawaka你的答案看起来不错，并将在纯角度但是，当我们使用角材料时，事情会变得很复杂。看我的[回复]（http://stackoverflow.com/a/42832848/3543808） –

去走遍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>

来源

2017-03-16 11:29:26

设置角材料从控制器下拉默认值

回答

相关问题