顯示和隱藏NG-重複週期的元素

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 ） 被展示。但它顯示列表的所有元素。我如何解決它只顯示列表中的一個元素（鼠標懸停）的「組面板」div？

Answer 1

最簡單的方法：使用ng-repeat的隔離範圍。 （hoveringGroup將爲每個NG重複迭代一個獨立的變量）

<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

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) 
 

 
    } 
 

 
});

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