Question

我有工作代码：

<input type="checkbox" ng-model="disabled" >
<input type="text" ng-model="text" ng-disabled="disabled">

当disabled == true输入被禁用时。我还需要隐藏实际的模型值（设置为空）。取消选中复选框后，应显示实际模型值。怎么做而不改变模型值？

Answer 1

我会做这样的事情：

<input type="checkbox" ng-model="disabled" ng-change="change()">
<input type="text" ng-model="text" ng-disabled="disabled">

...

$scope.change = function() {
  if ($scope.disabled) {
    $scope.textBackup = $scope.text;
    $scope.text = '';
  } else {
    $scope.text = $scope.textBackup;
  }
};

注意：我在阅读@AddulMateenMohammed评论之前发布了...我的答案是他的建议的实施......

Answer 2

这不是最佳选择，但如果您只想处理视图：

<input type="checkbox" ng-model="disabled">
<div ng-show="disabled">
   <input type="text" ng-init="text2 = ''" ng-model="text2" ng-disabled="true">
</div>

<div ng-hide="disabled">
   <input type="text" ng-model="text">
</div>

同样，这不是最佳选择！建议使用MarcosS选项。

Answer 3

@Makarov Sergey，我认为即使你有一个复杂的视图或数据源，基本的想法是使用一个临时变量，因为你需要有两个交换的值b / w。

＆＃13;

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);
  
  function DefaultController() {
    var originalText = '';
    var vm = this;
    vm.text = 'Hello, World!';
    vm.onValueChanged = onValueChanged;    
    
    function onValueChanged(text) {
      if (vm.disabled) {
      	originalText = text;
        vm.text = '';
      } else {
      	vm.text = originalText;
      }
    }
  }

＆＃13;

span {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div>
  <em>I </em><span>&hearts; </span><em>AngularJS</em>
</div>

<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <input type="checkbox" ng-model="ctrl.disabled" ng-change="ctrl.onValueChanged(ctrl.text)"/>
    <input type="text" ng-model="ctrl.text" ng-disabled="ctrl.disabled"/>
  </div>
</div>

＆＃13;

提示：对于未在视图中显示但存在于控制器中的对象不应在范围上分配，因为使用范围会添加一些JavaScript事件来执行数据绑定，这是不必要的开销，例如双向数据绑定的脏检查事件，这就是为什么在我使用var originalText = '';代替vm.originalText = '';

的示例代码段中的原因

Answer 4

找到适合我的解决方案

function directive() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            let oldViewValue = '';
            scope.$watch(() => attrs.hideValue, (newV) => {
                if (newV == 'true') {
                    oldViewValue = ngModelCtrl.$viewValue;
                    ngModelCtrl.$viewValue = '';
                } else {
                    ngModelCtrl.$viewValue = oldViewValue;
                }
                ngModelCtrl.$render();
            });
        }
    }
}

并使用：

<input type="checkbox" ng-model="disabled" >
<input type="text" ng-model="text" ng-disabled="disabled" hide-value="disabled">

禁用并清空模型值，然后将其还原

4 个答案: