如何从 AngularJS 中的控制器 enabled/disabled angular-material 日期选择器
How to enabled/disabled angular-material datepicker from the controller in AngularJS
我如何 enabled/disabled angular-material 控制器的日期选择器 我知道你可以像这样禁用日期选择器 <md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled></md-datepicker>
,如果我这样做的话似乎已禁用,这很好,但我需要能够在用户按下 select 选项后再次启用它,我尝试像这样使用 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>`
但我需要能够在用户按下 select 中的 select 选项后从控制器再次启用它。
编辑
我尝试了 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>
我如何 enabled/disabled angular-material 控制器的日期选择器 我知道你可以像这样禁用日期选择器 <md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled></md-datepicker>
,如果我这样做的话似乎已禁用,这很好,但我需要能够在用户按下 select 选项后再次启用它,我尝试像这样使用 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>`
但我需要能够在用户按下 select 中的 select 选项后从控制器再次启用它。
编辑
我尝试了 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>