Javascript 对焦时如何显示按钮？有棱角的

这基本上就是我想要的，一旦用户使用

ng model=query

关注该输入，我需要使该按钮出现，因此我知道有一个

ng focus

指令，我如何使用它

  <input type="search" ng-model="query">

  <!--this is the button I need to show once the user focus the input-->
  <div ng-show="query.length"
       ng-click="query = ''">
      Cancel
  </div>

取消

---

有一个按钮，当用户关注输入时，我将显示该按钮。因此，我可以使用什么来代替ng show？

使用+选择器。这将选择相邻的兄弟姐妹。

div.dat\u div{
显示：无；
}
输入[ng model=“query”]：focus+div.dat\u div{
显示：块；
}

取消

您可以将自己从纯AngularJS中分离出来，通过使用以下几种方法之一，利用CSS为您执行此操作。我会选择加号（+）选择器，如下所示：

HTML

还有其他方法，如果您点击此链接，我将向您介绍： 您不仅可以轻松地利用特定的ng模型选择器，还可以利用依赖AngularJS可能遇到的任何其他类似方法

---

如果你有任何问题，请告诉我

如果你想做纯角度的，看起来是这样的：

取消

这是一个很好的解决方案，但是如果我把它放在单独的div中怎么办呢？像这样的div现在不起作用了。@NietzscheProgrammer，除非有一些魔法，没有JS你就不能上树。CSS4可能会实现父选择器。我不熟悉angularjs，但上面的解决方案希望实现后端JS来实现这一点。我将为其他人添加jquery解决方案。很好，但是如果我采用这种方式，那该怎么办呢？这是一个按照您需要的方式使用选择器的问题，在这种情况下，由于依赖特定性时的性能，我会在特定性方面使元素更接近。这就是为什么你提供的JS-bin不起作用。jsbin中缺少ng app标记。@NietzscheProgrammer除了我的帖子外，我不能对其他帖子发表评论（声誉：/）。但是css解决方案不应该使用“display:none”，因为这样按钮就不起作用了。使用可见性：隐藏或不透明度：0，使按钮不可见但仍可单击。@NietzscheProgrammer:获得效果的最佳方法是将按钮放在html中输入的正后方，然后对其进行样式设置，使其放置在您想要的任何位置，并使用不透明度：0/不透明度：1而不是显示：无，以允许单击按钮。如果您希望将其放在单独的div中，请参阅上面的解决方案。

<input type="search" ng-model="query">

<!--this is the button I need to show once the user focus the input-->
<div class="hidden_btn" ng-show="query.length" ng-click="query = ''">
    Cancel
</div>

.hidden_btn { /* Hide this button initially */
    display: none;
}
input[ng-model="query"]:focus + .hidden_btn {
    display: block;
}