angularjs - 如何使用 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>

这里我使用引导类 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>

试试这个。您也可以使用 :hover 来显示/隐藏元素。

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