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

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 来捕获复选框状态的变化，并使用 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";
    }
  };
});