我有以下输入控件:
<input type="ng-model="someValue" ng-disabled="shouldBeDisabled"/>
以及包含以下变量的模型:
someValue
- shouldBeDisabled==fals
shouldBeDisabled
- 如果应禁用INPUT disabledText
- someValue
shouldBeDisabled==true
中显示的文字
如何更改上面的HTML slipet以使用AngularJS实现此功能?
是否可以使用内置的AngularJS指令仅使用这三个模型变量来实现它?或者我是否需要引入其他变量(例如someValueForInputBox
)并注意将其与someValue
(未禁用时)或disabledText
(禁用时)同步?
答案 0 :(得分:0)
您可以使用ng-show / ng-hide交换输入,如下所示:
<input ng-model="disabledText" ng-show="shouldBeDisabled" disabled/>
<input ng-model="someValue" ng-hide="shouldBeDisabled"/>
这是一个小提琴:http://jsfiddle.net/SVxCe/
答案 1 :(得分:0)
您可以通过以下方式执行此操作,但您可能需要关注shouldBeDisabled
;
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.shouldBeDisabled = true;
$scope.toggleIt = function() {
$scope.shouldBeDisabled= ! $scope.shouldBeDisabled;
$scope.someValue= $scope.shouldBeDisabled && $scope.disabledText || "true value"; // modify as required or leave off the true part.
}
});
您还可以存储该值,以便在禁用的文本出现然后切换回来时,您可以重新填充它。这是一块手表。
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.shouldBeDisabled = true;
$scope.disabledText = 'disabled stuff';
$scope.maintainTrueValue = '';
$scope.$watch('shouldBeDisabled', function() {
if ($scope.shouldBeDisabled)
$scope.maintainTrueValue = $scope.someValue;
$scope.someValue= $scope.shouldBeDisabled && $scope.disabledText || $scope.maintainTrueValue;
});
$scope.toggleIt = function() {
$scope.shouldBeDisabled= ! $scope.shouldBeDisabled;
}
});