繁体   English   中英

如何从AngularJS的控制器中启用/禁用角材料日期选择器

[英]How to enabled/disabled angular-material datepicker from the controller in AngularJS

我如何从控制器启用/禁用角材料日期选择器,我知道您可以禁用日期选择器,例如<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>

但这没用。

我设法禁用datepicker的唯一方法是这样

`<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;
}

但这没用。

我认为这是因为我在控制器中初始化了日期选择器,例如$scope.myDate = new Date(); 调用函数后,但我不确定这是否可能是问题

使用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> 

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM