0

我有以下输入控件：

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

以及具有以下变量的模型：

  • someValue- 应在输入时显示的值shouldBeDisabled==fals
  • shouldBeDisabled- 如果 INPUT 应该被禁用
  • disabledText- 应该在 INPUT 中而不是someValuewhen中显示的文本shouldBeDisabled==true

我应该如何更改上面的 HTML 表单以使用 AngularJS 实现这一点？是否可以使用仅具有这三个模型变量的内置 AngularJS 指令来实现这一点？或者我是否需要引入其他变量（例如someValueForInputBox）并注意将其与someValue（未禁用时）或disabledText（禁用时）同步？

4

2 回答 2

0

您可以使用 ng-show/ng-hide 来交换输入，如下所示：

<input ng-model="disabledText" ng-show="shouldBeDisabled" disabled/>
<input ng-model="someValue" ng-hide="shouldBeDisabled"/>

这是一个小提琴：http: //jsfiddle.net/SVxCe/

于 2013-07-08T18:56:20.947 回答
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

于 2013-07-08T19:04:54.243 回答