我有一个名为articles的对象数组，每个对象都包含一个名为category的字符串数组。每篇文章都在DOM中用ngRepeat指令表示，该指令包含第二个ngRepeat指令来表示每个类别。第二个ngRepeat有一个limitTo过滤器，它将类别的数量限制为2.当用户将鼠标放在基础article元素上时，应该删除限制并且category数组中的所有字符串都应该是可见的。
我的问题是当用户将鼠标悬停在一个元素上时，会显示articles数组中每个对象的完整类别数组。如何让DOM只显示鼠标事件发生的元素的完整类别？
Plunkr: https://plnkr.co/edit/PW51BBnQEv589rIdnaCK?p=preview
您可以传递您悬停并在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="[email protected]" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script data-require="[email protected]" data-semver="4.0.0" src="script.ts"></script>
<script data-require="[email protected]" data-semver="4.0.0" src="system.config.js"></script>
<script data-require="[email protected]" 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">
<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">
<span class="label label-warning"
ng-mouseleave="hideAllcat()">{{ cat.name}}
</span>
</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>这是另一种可以接近的方式。我删除了ng-if指令，因为它不需要。在您的第一个ng-repeat指令中，文章对象在要使用的范围内可用。 $scope.hoverMode被删除，支持在每篇名为limit的文章中添加一个attr。
ng-mouseover事件我取代了ng-mouseenter，因为它是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="[email protected]" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script data-require="[email protected]" data-semver="4.0.0" src="script.ts"></script>
<script data-require="[email protected]" data-semver="4.0.0" src="system.config.js"></script>
<script data-require="[email protected]" 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">
<span class="label label-warning">{{cat.name}}
</span>
</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>