特定の要素に編集アイコンを表示する必要がありますが、ホバーするとng-repeatの各要素の編集アイコンが表示されます。 controllerAsを使ってどうすれば実現できますか？ng-mouseoverでng-repeatに特定の項目を表示するにはどうすればいいですか？
解決策を教えてください。私は通常の動作（$スコープ）で達成することができますが、コントローラを介して取得することはできません。ここで
Here is the link -- > enter code herehttp://plnkr.co/edit/ETMyoDLR8HPFIZFrA90n?p=preview
何が必要です。コントローラーで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>はそれが役に立てば幸い:)
あなたは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 codeを追加していてくださいもう一つの解決策はありplunker
ありがとうございます...それは働く –
です。
<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;
};
});
ng-classには、表示するかどうかの条件ロジックを使用できます。あなたの基本要件を特定し、CSSを操作する –
こんにちは@ルチ、ng-show/hideまたはng-repeatをng-repeatの中で使うことができます。 –
こんにちは@ルチ、 '