對焦時如何顯示按鈕？ 角度的

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

如果您想以純角度進行操作，則如下所示：

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

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：顯示基於鼠標事件的隱藏元素，您不僅可以輕松地將其用於特定的ng-model選擇器，而且還可以將其應用於任何其他對象依靠AngularJS可以碰到的類似方法。

如果您有任何疑問，請告訴我！