Question

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

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

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

Answer 1

这是你需要的。不使用控制器设置hoverEdit，而是使用task。

＆＃13;

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;
  };

});

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

希望有所帮助：）

Answer 2

您可以使用$ index将索引设置为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

Answer 3

还有一个解决方案，请查看添加的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;
    };

});

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

3 个答案: