angularjs显示div如果点击输入字段内部，并隐藏如果点击外部

我想显示我的div如果用户在输入字段内单击，并且如果单击外部，那么它应该隐藏它。如果再次在场内点击，则不应隐藏。这里是我的尝试： JSFIDDLE LINKangularjs显示div如果点击输入字段内部，并隐藏如果点击外部

<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>

的问题是，在打开页面时，我看到的帮助文本，它突然消失了，当我点击里面的字段，它再次说明，但它只会在场内再次点击时消失。现在，我希望它只能在场外点击才能隐藏。请帮我这个。

来源

2017-08-11 cplus

使用NG对焦代替NG单击

Plunker Example

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

来源

2017-08-11 12:03:46

为什么它需要我多隐藏元素？在你的运动员中它是直接的效果。我怎样才能修改css转换？现在你已经删除了ng级？ – cplus

@JeevaArulanandam它不会与'ng-class =“{'hidden'：！focused}工作''' –

我想你忘了在你的css文件中加入'.hidden {display：none;}' –

下面的代码应该可以帮到你。

<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>

来源

2017-08-11 11:59:17 madhu

好，但我希望能够添加CSS过渡时，它显示/隐藏。这就是我使用ng级的原因。用你的解决方案，ng-blur需要几秒钟来隐藏它......这有点烦人。 – cplus

angularjs显示div如果点击输入字段内部，并隐藏如果点击外部

回答

相关问题