ng-changeとng-requiredで角度材料md-select問題

Question

私のチームは、角度材料のバージョンをv1.0.8からv1.1.0-rc.5にアップグレードしています。我々は<md-select>を持っており、ng-requiredとng-changeの機能を持っています。

angular.module('MyApp',['ngMaterial', 'ngMessages']) 
 
.controller('AppCtrl', function($scope) { 
 
    // if I uncomment this line change myChange function gets invoked the first time 
 
    //$scope.myModel = {}; 
 
    $scope.values = [ 
 
    {val:1, des: 'One'}, 
 
    {val:2, des: 'Two'} 
 
    ]; 
 
    $scope.myChange = function(){ 
 
    alert('Changed value'); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script> 
 
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script> 
 

 
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" /> 
 

 
<div ng-controller="AppCtrl" layout="column" layout-align="center center" ng-cloak="" ng-app="MyApp"> 
 
    <form name="myForm"> 
 
    <md-input-container class="md-block"> 
 
     <label>Favorite Number</label> 
 
     <md-select name="myModel" ng-change="myChange()" ng-model="myModel" ng-required="true"> 
 
     <md-option ng-value="myVal" ng-repeat="myVal in values">{{myVal.val}}</md-option> 
 
     </md-select> 
 
    </md-input-container> 
 
    myModel.des: {{myModel.des}} 
 
    </form> 
 
</div>

このコードの動作を：あなたは、次のコードで見ることができるように、ユーザーが、新しい値を選択したときに、ライブラリの新しいバージョンにアップグレードした後、変更機能は実行されませんAngular Material v1.0.8でうまくいく。

からng-requiredを削除すると、変更機能が実行されます。

をtrackByと追加することは、ドキュメントに示唆されているように役立ちません。

私たちは何が欠けていますか？

Answer 1

次の操作を行うことができます：

<form name="myForm"> 
    <md-input-container class="md-block"> 
     <label>Favorite Number</label> 
     <md-select name="myModel" ng-change="myChange()" ng-model="selected" ng-required="true"> 
     <md-option ng-value="$index" ng-repeat="myVal in values">{{myVal.val}}</md-option> 
     </md-select> 
    </md-input-container> 
    myModel.des: {{values[selected].des}} 
    </form> 

ng-changeを選択変更でトリガされます。

angular.module('MyApp',['ngMaterial', 'ngMessages']) 
 
.controller('AppCtrl', function($scope) { 
 
    $scope.values = [ 
 
    {val:1, des: 'One'}, 
 
    {val:2, des: 'Two'} 
 
    ]; 
 
    $scope.myChange = function(){ 
 
    alert('Changed value'); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-messages.min.js"></script> 
 
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script> 
 

 
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" /> 
 

 
<div ng-controller="AppCtrl" layout="column" layout-align="center center" ng-cloak="" ng-app="MyApp"> 
 
    <form name="myForm"> 
 
    <md-input-container class="md-block"> 
 
     <label>Favorite Number</label> 
 
     <md-select name="myModel" ng-change="myChange()" ng-model="selected" ng-required="true"> 
 
     <md-option ng-value="$index" ng-repeat="myVal in values">{{myVal.val}}</md-option> 
 
     </md-select> 
 
    </md-input-container> 
 
    myModel.des: {{values[selected].des}} 
 
    </form> 
 
</div>