Question

我的代码有问题，我已经使用鼠标悬停创建了一个代码但是每行显示我的图片编辑非常慢，所以我读到了mouseenter更快（我希望因为我有正常的2000行），< / p>

但我遇到了问题，当我去tr时，它会向我显示所有图片，

这是我的完整代码html

    <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-mouseenter="mouseIn($event)" ng-mouseleave="mouseOut($event)" ng-repeat="x in records">
<td>{{x}}</td>
<td>
<div class="editNucleo" ng-show="editNucleo">
<input type="image" id="myimage" style="width:20px;" src="http://www.iconsdb.com/icons/download/green/edit-512.png" />
</div>
</td>
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
  ]

   $scope.mouseIn = function (event) {
        $scope.editNucleo = true;
    }

    $scope.mouseOut = function (event) {
        $scope.editNucleo = false;
    }
});
</script>

</body>
</html>

我需要在制作mouseenter，mouseleave

时显示并隐藏右侧的图片

Answer 1

您的脚本不知道在鼠标输入时显示哪个特定索引尝试此操作无需任何功能

 <!DOCTYPE html>
 <html>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>

 <body ng-app="myApp" ng-controller="myCtrl">
 <table>
  <tr ng-mouseenter="editNucleo = $index" ng mouseleave="editNucleo = null" ng-repeat="x in records">
  <td>{{x}}</td>
  <td>
  <div class="editNucleo" ng-show="editNucleo == $index">
  <input type="image" id="myimage" style="width:20px;" src="http://www.iconsdb.com/icons/download/green/edit-512.png" />
  </div>
  </td>
  </tr>
  </table>
  <script>
  var app = angular.module("myApp", []);
   app.controller("myCtrl", function($scope) {
  $scope.records = [
    "Alfreds Futterkiste",
    "Berglunds snabbköp",
    "Centro comercial Moctezuma",
    "Ernst Handel",
   ];
   $scope.editNucleo = null;
  });
</script>

使用mouseenter AngularJS在表格中显示每行的编辑图片行

1 个答案: