Question

如果用户在输入字段中单击，我想显示我的div，如果仅在外部单击，则应隐藏它。如果再次点击该字段，它不应该隐藏。这是我的尝试：的 JSFIDDLE LINK

<div ng-app="app">
<div ng-controller="HelpCtrl">
    <input type="text" id="myText" name="myText" ng-click="showHelp = ! showHelp">

    <div  class="details" ng-class="{ 'hidden': ! showHelp }">
    <p>
    The help text here!
    </p>
    </div>
</div>
</div>

问题是当页面打开时，我看到帮助文本，它突然消失，当我在字段内单击时，它再次显示，但只有再次在字段内单击时它才会消失。现在我希望它只在字段外点击时隐藏。请帮帮我。

Answer 1

使用 ng-focus 代替ng-click

Plunker Example

<input type="text" ng-focus="focused = true" ng-blur="focused = false" />
<p ng-if="focused">Input has focus!</p>

Answer 2

下面的代码可以帮助你。

<style>

.hidden{
 -webkit-transition: width 2s; transition: width 2s;
 display:none !important;;

}
.details{
display:block;
}
</style>
    <div ng-app="app">
     <div ng-controller="HelpCtrl">
              <input type="text" id="myText" name="myText" ng-focus="showHelp = true" ng-blur="showHelp = false">

    <div  class="details" ng-class="{'hidden':!showHelp}">
    <p>
    The help text here!
    </p>
    </div>
      </div>
    </div>

如果在输入字段内单击则angularjs显示div，如果在外部单击则隐藏

2 个答案: