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

＆＃13;

var app = angular.module("testApp", []);

app.controller('testCtrl', function($scope){
  $scope.open = false;
});

＆＃13;

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

＆＃13;

试试这个。您也可以将:hover用于show / hide元素。

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

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

1 个答案: