Question

这基本上就是我想要的，我需要在用户使用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？

Answer 1

如果你想以纯粹的角度做这样的事情：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>

  <input 
  type="search" 
  ng-model="query" 
  ng-focus="isSearchFocused=true"
  ng-blur="isSearchFocused=false"/>

<div 
  style="opacity:{{isSearchFocused && query.length?1:0}}"
  ng-click="query = ''">
  Cancel
</div>
 
</div>

＆＃13;

Answer 2

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

div.dat_div {
    display: none;
}
input[ng-model="query"]:focus + div.dat_div {
    display:block;
}

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

jQuery：$('input[ng-model="query"]').on('focus',function(){$('div.dat_div').show();});

Answer 3

您可以将自己与纯AngularJS分开，并利用CSS代替您使用少数方法之一为您执行此操作。我会选择加号（+）选择器：

HTML

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

CSS

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

还有其他方法可以解决这个问题，如果你按照这个链接我会引用你：AngularJS: show hide elements based on mouse events 您不仅可以轻松利用您的特定ng模型选择器，还可以轻松利用任何其他类似的方法，依靠AngularJS可以实现这些方法。

如果您有任何疑问，请与我联系！

焦点时如何出现按钮？角

3 个答案: