Question

这是我的HTML：

    <ul class="no-bullet">
        <li ng-repeat="(group, count) in info.info">

            <a href="#" ng-click="getQuestions(group)"
               ng-mouseenter="showGroupPanel()" ng-mouseleave="hideGroupPanel()"
                    >{{group}} ({{count}}) </a>

            <div class="group_panel" ng-show="hoveringGroup">
                <i class="fa fa-check"></i>
                <i class="fa fa-folder-o"></i>
            </div>

        </li>

这是我的JS：

    $scope.hoveringGroup = false;

    $scope.showGroupPanel = function() {
        $scope.hoveringGroup = true;
    }

    $scope.hideGroupPanel = function() {
        $scope.hoveringGroup = false;
    }

当用户鼠标悬停列表中的一个元素时，会显示附加div（group_panel）。但它会显示列表的所有元素。如何修复它以仅为列表的一个元素（鼠标悬停）显示“group-panel”div？

Answer 1

最简单的方法：使用ng-repeat的隔离范围。（hoveringGroup将是每个ng-repeat迭代的单独变量）

<ul class="no-bullet">
    <li ng-repeat="(group, count) in info.info">

        <a href="#" ng-click="getQuestions(group)"
           ng-mouseenter="hoveringGroup = true" ng-mouseleave="hoveringGroup = false"
                >{{group}} ({{count}}) </a>

        <div class="group_panel" ng-show="hoveringGroup">
            <i class="fa fa-check"></i>
            <i class="fa fa-folder-o"></i>
        </div>

    </li>

您还可以将信息存储在重复的项目中：

<ul class="no-bullet">
    <li ng-repeat="info in info.info">

        <a href="#" ng-click="getQuestions(info.group)"
           ng-mouseenter="showGroupPanel(info)" ng-mouseleave="hideGroupPanel(info)"
                >{{info.group}} ({{info.count}}) </a>

        <div class="group_panel" ng-show="info.hoveringGroup">
            <i class="fa fa-check"></i>
            <i class="fa fa-folder-o"></i>
        </div>

    </li>

$scope.showGroupPanel = function(info) {
    info.hoveringGroup = true;
}

$scope.hideGroupPanel = function(info) {
    info.hoveringGroup = false;
}

Answer 2

＆＃13;

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope) {


  $scope.info = {


    info: [{
        id: 1
      }, {
        id: 2
      }, {
        id: 3
      }

    ]

  }

  $scope.hoveringGroup = false;

  $scope.showGroupPanel = function(level) {
    level.hoveringGroup = true;

  }

  $scope.hideGroupPanel = function(level) {
    level.hoveringGroup = false;
  }

  $scope.createlevel = function(count, level) {

    return angular.copy(count, level)

  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div ng-app="app">
  <div ng-controller="homeCtrl">

    <ul class="no-bullet">
      <li ng-repeat="(group, count) in info.info" ng-init="level =createlevel(count,level)">

        <a href="#" ng-click="getQuestions(group)" ng-mouseenter="showGroupPanel(level)" ng-mouseleave="hideGroupPanel(level)">{{group}} ({{count}}) </a>

        <div class="group_panel" ng-show="level.hoveringGroup">
          <i class="fa fa-check"></i>
          <i class="fa fa-folder-o"></i>
        </div>

      </li>
    </ul>


  </div>
</div>

＆＃13;

显示和隐藏ng-repeat循环的元素

2 个答案: