Отображение строки редактирования изображения для каждой строки в таблице с помощью mouseenter AngularJS

у меня проблема с моим кодом, я уже делаю код с наведением мыши, но было очень медленно отображать в каждой строке мое редактирование изображения, поэтому я прочитал, что ввод с помощью мыши работает быстрее (надеюсь, потому что у меня обычно 2000 строк),

но у меня проблемы, он показывает мне все картинки, когда я иду на тр,

это мой полный код 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


angularjs mouseenter mouseleave
person Gazano    schedule 29.03.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ваш скрипт не знает, какой конкретный индекс показывать при вводе мыши, попробуйте эту функцию, не требуется

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

person Umar Younis    schedule 29.03.2017