如何在AngularJS控制器中启用/禁用angular-material日期选择器

Question

如何在AngularJS控制器中启用/禁用angular-material日期选择器

javascriptangularjsdatepickerangular-material

3

我该如何在控制器中启用/禁用angular-material日期选择器？我知道可以像这样禁用日期选择器：<md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled></md-datepicker>，如果我这样做，日期选择器将显示为禁用状态，这很好，但是我需要能够在用户按下选择选项后再次启用它，我尝试使用ng-disable，像这样：

<div class="form-group">
   <label>Delivery date:</label>
      <md-datepicker ng-model="myDate" md-placeholder="Enter date"
                                           md-max-date="maxDate"
                                           md-min-date="minDate"
                                           md-date-filter="myFilter"
                                           ng-disabled="enabledDisableDate">
     </md-datepicker>
</div>

但是它没有起作用。

我成功禁用日期选择器的唯一方法是这样的：

`<md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled></md-datepicker>`

但是当用户从选择框中选择一个选项后，我需要能够在控制器中重新启用它。

编辑：我尝试了像我在问题开始时展示的那样使用ng-disabled指令。在我的控制器中。

$scope.myDate = new Date();    
$scope.enabledDisabledFunction = function (id)
{
   $scope.enabledDisableDate = false;
}

但是它没有起作用。

我认为这是因为我在控制器中像这样初始化了datepicker$scope.myDate = new Date(); ，在调用函数之后，但我不确定是否这可能是问题。

- Bill_Data23

看看我的更新答案，我添加了可工作的示例。 - Antipod

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Antipod · Accepted Answer

使用ng-disabled指令。 ngDisabled

对我来说效果很好，请提供您的代码，也许您打错了什么。

angular.module('MyApp',['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) {
    $scope.disabled = true;
});

<link rel="stylesheet" href="https://material.angularjs.org/latest/angular-material.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://material.angularjs.org/latest/angular-material.min.js"></script>

<div ng-controller="AppCtrl" style="padding: 40px;" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
  <label>
    <input type="checkbox" ng-model="disabled" /> Disabled
  </label>
  <hr />
  <md-datepicker ng-model="myDate" md-placeholder="Enter date" ng-disabled="disabled"></md-datepicker>
</div>