如何删除 limitTo 过滤器对鼠标悬停事件的限制？

Question

我有一个名为 articles 的对象数组，每个对象都包含一个名为 category 的字符串数组。每篇文章都在 DOM 中用一个 ngRepeat 指令表示，其中包含第二个 ngRepeat 指令来表示每个类别。第二个 ngRepeat 有一个 limitTo 过滤器，将类别数限制为 2。当用户将鼠标悬停在基础 article 元素上时，应删除该限制并且 [=11] 中的所有字符串=] 数组应该是可见的。

我的问题是，当用户将鼠标悬停在一个元素上时，会显示 articles 数组中每个对象的完整类别数组。如何让 DOM 仅显示发生鼠标事件的元素的完整类别？

Plunkr: https://plnkr.co/edit/PW51BBnQEv589rIdnaCK?p=preview

Answer 1

您可以传递悬停在其上的文章并在 scope 变量中设置。只需将您的 ng-if 支票更新为 :

ng-if="hoverMode === true && hoveredArticle === article"

工作示例：

// Code goes here

angular
 .module('myApp', [])
 .controller('myController', ($scope) => {
   
   $scope.articles = [ { date: 'some', category: [ {name: "Sports"}, {name: "News"}, {name: "Cinema"} ] }, { date: 'some', category: [ {name: "A"}, {name: "B"}, {name: "C"} ] }, { date: 'some', category: [ {name: "D"}, {name: "E"}, {name: "F"} ] } ]
 
  $scope.hoverMode = false;

  $scope.showAllcat = function(article) {
   $scope.hoveredArticle = article;
   $scope.hoverMode = true;
  }
  
  $scope.hideAllcat = function() {
   $scope.hoveredArticle = null;
   console.log('hover working');
   $scope.hoverMode = false;
  }
 
 
 
 });

<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="script.ts"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="system.config.js"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller='myController'>
  <table>
    <tbody>
      <tr>
        <th>Date</th>
        <th>Categories</th>
      </tr>
      <tr ng-repeat="article in articles">
        <td><span>{{ article.date }}</span></td>
        <td ng-if="hoverMode === false || hoveredArticle !== article">
            <span ng-repeat="cat in article.category | limitTo: 2">&nbsp;
                <span class="label label-warning"
                      ng-mouseover="showAllcat(article)">{{ cat.name}}
                </span>
            </span>
        </td>
        <td ng-if="hoverMode === true && hoveredArticle === article">
            <span ng-repeat="cat in article.category">&nbsp;
                <span class="label label-warning"
                      ng-mouseleave="hideAllcat()">{{ cat.name}}
                </span>
            </span>
        </td>
      </tr>


    </tbody>
  </table>
</body>

</html>

Answer 2

这是解决此问题的另一种方法。我删除了 ng-if 指令，因为它不需要。在您的第一个 ng-repeat 指令中，文章对象在要使用的范围内可用。 $scope.hoverMode 已被删除，以便为每篇名为 limit 的文章添加一个属性。

我用 ng-mouseenter 替换了 ng-mouseover 事件，因为它是 ng-mouseleave 的平行事件。这些指令不是调用函数，而是通过 DOM 中的一个简单表达式来操纵限制值。我在代码中保留了函数 showAllCat() 并进行了修改。它以一个文章对象作为参数来直接操作类别。

如果 limit var 是 undefined，则过滤器中没有限制约束。

通过删除 ng-if，您将删除与文章数量相等的 n 个听众。由于不需要，这只是额外的开销。

// Code goes here

angular
  .module('myApp', [])
  .controller('myController', ($scope) => {
    $scope.minLimit = 2;
    $scope.maxLimit = undefined;

    $scope.articles = [{
      date: 'some',
      category: [{
        name: "Sports"
      }, {
        name: "News"
      }, {
        name: "Cinema"
      }]
    }, {
      date: 'some',
      category: [{
        name: "A"
      }, {
        name: "B"
      }, {
        name: "C"
      }]
    }, {
      date: 'some',
      category: [{
        name: "D"
      }, {
        name: "E"
      }, {
        name: "F"
      }]
    }];
    $scope.articles.forEach((article)=>{article.limit=$scope.minLimit});
    
    $scope.showAllcat = function(article) {
      console.log('hover working');
      article.limit = article.limit === minLimit ? maxLimit : minLimit;
    }
  });

<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="script.ts"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="system.config.js"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller='myController'>
  <table>
    <tbody>
      <tr>
        <th>Date</th>
        <th>Categories</th>
      </tr>
      <tr ng-repeat="article in articles"
          ng-mouseenter="article.limit = maxLimit"
          ng-mouseleave="article.limit = minLimit">
        <td><span>{{ article.date }}</span></td>
        <td><span ng-repeat="cat in article.category | limitTo: article.limit">&nbsp;
                <span class="label label-warning">{{cat.name}}
                </span>
            </span>
        </td>
      </tr>


    </tbody>
  </table>
</body>

</html>

如何删除 limitTo 过滤器对鼠标悬停事件的限制？

How do I remove the limit of a limitTo filter on mouseover event?

javascript

angularjs

angularjs-ng-repeat