Angular Material md-select ng-change 和 ng-required 问题

Question

我的团队正在将 Angular Material 版本从 v1.0.8 升级到 v1.1.0-rc.5。我们有一个带有 ng-required 和 ng-change 函数的 <md-select>。升级到新版本的库后，当用户选择一个新的值时，不会执行更改函数，如下代码所示：

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。

如果我们从 md-select 中删除 ng-required，就会执行 change 函数。

按照文档中的建议添加 ng-model-options 和 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>

Angular Material md-select ng-change 和 ng-required 问题

Angular Material md-select issue with ng-change and ng-required

javascript

angularjs

angular-material