Question

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

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

articles 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伪指令中，article对象在要使用的范围内可用。删除$scope.hoverMode的目的是为每个称为limit的文章添加一个attr。

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

如果limit变量为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>

如何在mouseover事件上删除limitTo过滤器的限制？

2 个答案: