如何使用ng-mouseover在ng-repeat中显示特定项目？

我需要在特定元素上显示“编辑”图标，但是如果将其悬停，则会在ng-repeat中的每个元素上显示“编辑”图标。我如何使用controllerAs来实现它？如何使用ng-mouseover在ng-repeat中显示特定项目？

请为我提供相同的解决方案。我能够通过正常行为（$范围）来实现，但无法通过控制器获取它。

Here is the link -- > enter code herehttp://plnkr.co/edit/ETMyoDLR8HPFIZFrA90n?p=preview

来源

2017-06-19 Ruchi Prasad

你可以在ng-class上使用一些条件逻辑来显示和不显示。确定您的基本要求并操作css –

Hi @Ruchi，如果在ng-repeat内部，可以使用ng-show/hide或ng-ng。 –

Hi @Ruchi，'

这里是你所需要的。使用控制器代替hoverEdit，而不是使用task。

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function() { 
 
    var ma = this; 
 
    ma.tasks = [{ 
 
     name: 'Item One' 
 
    }, 
 
    { 
 
     name: 'The second item' 
 
    }, 
 
    { 
 
     name: 'Three items is the best' 
 
    } 
 
    ]; 
 

 
    ma.hoverIn = function(task) { 
 
    task.hoverEdit = true; 
 
    }; 
 

 
    ma.hoverOut = function(task) { 
 
    task.hoverEdit = false; 
 
    }; 
 

 
});

/* Put your css in here */ 
 

 
li { 
 
    width: 200px; 
 
    list-style-type: none; 
 
    padding: 6px 10px; 
 
} 
 

 
li:hover { 
 
    background: #EEE; 
 
} 
 

 
.animate-show { 
 
    -webkit-transition: all linear 0.5s; 
 
    transition: all linear 0.5s; 
 
    opacity: 1; 
 
} 
 

 
.animate-show.ng-hide-add, 
 
.animate-show.ng-hide-remove { 
 
    display: inline-block !important; 
 
} 
 

 
.animate-show.ng-hide { 
 
    opacity: 0; 
 
}

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
</head> 
 

 
<body ng-controller="MainCtrl as ma"> 
 
    <ul> 
 
    <li ng-repeat="task in ma.tasks" ng-mouseover="ma.hoverIn(task)" ng-mouseleave="ma.hoverOut(task)"> 
 
     {{task.name}} 
 
     <span ng-show="task.hoverEdit" class="animate-show"> 
 
       <a> 
 
        <img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519584-081_Pen-16.png" alt=""> 
 
        Edit 
 
       </a> 
 
      </span> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

希望它能帮助:)

来源

2017-06-19 10:27:19 Manish

可以使用$指数的指数设置为hoverEdit

ma.hoverIn = function(index){ 
    ma.hoverEdit = index; 
}; 

ma.hoverOut = function(){ 
    ma.hoverEdit = null; 
};

检查，如果你徘徊在指数显示它使用ng-show

<ul> 
    <li ng-repeat="task in ma.tasks" ng-mouseover="ma.hoverIn($index)" ng-mouseleave="ma.hoverOut()"> 
     {{task.name}} 
     <span ng-show="ma.hoverEdit == $index" class="animate-show"> 
      <a> 
       <img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519584-081_Pen-16.png" alt=""> 
       Edit 
      </a> 
     </span> 
    </li>

这里是plunker

来源

2017-06-19 10:27:56 user93

非常感谢...它的工作 –

还有一个解决方案，请看看这个添加plunker code。

<body ng-controller="MainCtrl as ma"> 
    <ul> 
     <li ng-repeat="task in ma.tasks" ng-mouseover="ma.hoverIn(task)" ng-mouseleave="ma.hoverOut(task)"> 
      {{task.name}} 
      <span ng-show="task.hoverEdit" class="animate-show"> 
       <a> 
        <img src="https://cdn2.iconfinder.com/data/icons/freecns-cumulus/16/519584-081_Pen-16.png" alt=""> 
        Edit 
       </a> 
      </span> 
     </li> 
    </ul> 
</body> 

var app = angular.module('plunker', ['ngAnimate']); 

app.controller('MainCtrl', function() { 
    var ma=this; 
    ma.tasks = [ 
     {name: 'Item One', hoverEdit : false}, 
     {name: 'The second item', hoverEdit : false}, 
     {name: 'Three items is the best', hoverEdit : false} 
    ]; 

    ma.hoverIn = function(obj){ 
     obj.hoverEdit = true; 
    }; 

    ma.hoverOut = function(obj){ 
     obj.hoverEdit = false; 
    }; 

});

来源

2017-06-19 14:35:55

如何使用ng-mouseover在ng-repeat中显示特定项目？

回答

相关问题