設置角材料從控制器下拉默認值

我試圖從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

設置角材料從控制器下拉默認值

回答

相關問題