AngularJS - 如何在禁用的文本框中显示自定义文本

时间:2013-07-08 18:10:36

标签: validation angularjs

我有以下输入控件:

<input type="ng-model="someValue" ng-disabled="shouldBeDisabled"/>   

以及包含以下变量的模型:

  • someValue - shouldBeDisabled==fals
  • 时应在INPUT中显示的值
  • shouldBeDisabled - 如果应禁用INPUT
  • disabledText - someValue
  • 时应在INPUT而非shouldBeDisabled==true中显示的文字

如何更改上面的HTML slipet以使用AngularJS实现此功能? 是否可以使用内置的AngularJS指令仅使用这三个模型变量来实现它?或者我是否需要引入其他变量(例如someValueForInputBox)并注意将其与someValue(未禁用时)或disabledText(禁用时)同步?

2 个答案:

答案 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;
  }

});

观看演示:http://plnkr.co/edit/8KAJc9JXvi2rffsjPXF5?p=preview