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

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-if-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";
    }
  };
});