Question

我只想在禁用复选框时显示工具提示。在输入文本字段中输入正确的格式后，该复选框将启用。禁用复选框后，我可以显示工具提示，但是启用复选框后，它不会隐藏。

<div class="form-group">
    <div class="col-xs-12 col-sm-9">
        <div tooltip="Tooltip message">
            <input type="checkbox" ng-model="view.checkBox"
                   class="nsg-form--checkbox" 
                   ng-disabled="someInput.$invalid"/>
        </div>
    </div>
</div>

Answer 1

您必须将ng-change与someInput一起使用，并相应地隐藏/显示工具提示。

Answer 2

我建议使用ng-change捕获复选框状态的更改，并使用ng-if在复选框返回true时显示弹出窗口。我整理了一个简短的示例，该示例应该会有所帮助：https://codepen.io/anon/pen/xBEvOq

HTML：

<div ng-app="myApp">
  <div ng-controller="exampleCtrl">
      <input title="{{(disabledStatus?'disabledReason' : '')}}" 
             ng-disabled="displayPopup" type="checkbox" ng-model="checkBox" 
             ng-change="evaluate(checkBox)"/>
      <div ng-if="displayPopup">Insert Popup Code Here!</div>
  </div>
</div>

JS：

var app = angular.module('myApp', []);
app.controller('exampleCtrl', function($scope) {
  $scope.evaluate = function(displayPopup) {
    $scope.displayPopup = displayPopup;
    $scope.disabledStatus = false;
    if($scope.displayPopup === true){
      $scope.disabledStatus = true;
      $scope.disabledReason = "You can make up reason here";
    }
  };
});

启用复选框后如何隐藏工具提示

2 个答案: