我想要一个带有 md-select 的空白选项，我希望它在需要时不验证

Question

我正在使用 Angular Material 和 md-select 我想做一个空白选项，这样当你 select 它时，你在 select.如果我要求它，那么我希望这个选项在检查时返回 false。

这是一个演示：https://plnkr.co/edit/FZ8xt5ZCRJY3fFMh3fFU?p=preview

<html>
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</ript>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-semver="1.2.19"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form>
      <select ng-model="selectedValue2" required >
        <option ng-repeat="option in options['id'] | orderBy: 'id'" ng-value="option.value">{{option.name}}</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  </body>  
</html>

我的情况比较复杂，所以我不想要解决方法，我只是想要一种方法来在我 select 空白选项时使所需的工作正常进行。

Answer 1

提问后问题发生了变化。最初不是关于 md-select 所以可能有更好的方法来做到这一点。您需要做的就是将此选项添加到您的 md-select:

<md-option value=""></md-option>

并从您的对象中删除 blank 条目。

HTML

<select ng-model="selectedValue2" required >
    <option value=""></option>
    <option ng-repeat="option in options['id'] | orderBy: 'id'" ng-value="option.value">{{option.name}}</option>
</select>

JavaScript

$scope.options = {id : [
    {name : 'World', value : 'World', id:3},
    {name : 'qweqwe', value : 'qweqwe', id:1},
    {name : 'rwerasdf', value : 'rwerasdf', id:2}
]}

如果您使用常规 select，这就足够了，但是 md-select 认为空值满足 required 属性，因此您需要额外的工作。

在你的 select 中添加函数 checkNull 到运行 onchange:

 ng-change="checkNull()"

然后将其添加到您的范围：

$scope.checkNull = function(){
    if(typeof $scope.selectedValue2 === "undefined"){
        $scope.myform.myselect.$setValidity("required", false);
    }
};

Working Fiddle

Answer 2

尝试添加以下代码段：

<md-option ng-value disabled>Choose One</md-option>

我想要一个带有 md-select 的空白选项，我希望它在需要时不验证

I want a blank option with md-select and I want it not to validate when required

html

javascript

angularjs

angularjs-material

md-select