如何在鼠标悬停时使用ng-mouseover隐藏和显示输入元素

Question

这是我的代码: -

<div class="input-group">
    <input class="form-control" ng-model="name" required />
    <span class="input-group-btn">
        <button class="btn btn-primary" type="button" >
               <i class="fa fa-plus"></i>
        </button>
    </span>
</div>

这里我使用bootstrap类input-group,其中包含两个元素<input>,<span>
所以在这里我想在鼠标悬停时显示该按钮.
所以我试着用ng-mouseover

<span class="input-group-btn">
     <button class="btn btn-primary" type="button" ng-mouseover="open" >
            <i class="fa fa-plus"></i>
     </button>
</span>

哪里开放: -

$scope.open = true;

我认为ng-mouseover是更好的选择,但如果有任何其他简单的方法....请告诉我

Answer 1

var app = angular.module("testApp", []);

app.controller('testCtrl', function($scope){
  $scope.open = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
  <div ng-mouseover="open = true" ng-mouseleave="open = false">
    To display button mouseover here!!!
    <button class="btn btn-primary" type="button" ng-show="open">
      <i class="fa fa-plus">Button</i>
    </button>
  </div>  
</div>

试试这个.你也可以使用:hovershow/hide元素.

<button class="btn btn-primary" type="button" ng-show="open" ng-mouseover="open = true" >
  <i class="fa fa-plus"></i>
</button>