代码之家 › 专栏 › 技术社区 › Sameer

如何取消LimitToFilteronMouseover事件的限制?

angularjs-ng-repeat angularjs javascript

Sameer · 技术社区 · 6 年前

我有一个叫做 articles category . 每个项目都在DOM中用 ngRepeat 包含第二个 ngRepeat公司 ngRepeat公司 limitTo 将类别数限制为2的筛选器。当用户将鼠标移到基座上时 article 元素中的所有字符串数组应该可见。

我的问题是,当用户将鼠标移到一个元素上时,该元素中每个对象的完整类别数组 文章 显示阵列。如何让DOM只显示鼠标事件发生的元素的完整类别?

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

2 回复 | 直到 6 年前

georgeawg 6 年前

你可以通过你的文章,你的悬停和设置在 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>

georgeawg 6 年前

这是另一种方法。我移除了 ng-if 指令,因为它是不需要的。在你的第一次 ng-repeat 在要使用的范围内,项目对象是可用的。 $scope.hoverMode limit .

ng-mouseover 我取代的事件 ng-mouseenter 因为这是与 ng-mouseleave 我离开了功能 showAllCat()

限制 var是 undefined

通过移除 ng如果 您正在删除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>