http://plnkr.co/edit/aiGCPJEwTj0RWnuoCjsW?p=preview
你会怎么做？
HTML：
<li ng-repeat="acc in accounts">
<div class="well well-sm">
<div class="popover-remove" ng-show="popoverRemove">Click to remove item</div>
<h4>{{acc.label}}</h4>
<button class="btn btn-default"
ng-mouSEOver="showPopover()"
ng-mouseleave="hidePopover()">Remove</button>
</div>
</li>
角度控制器：
var app = angular.module('myApp',[])
.controller('AccountsCtrl',['$scope',function($scope) {
var vs = $scope;
vs.accounts = [
{
id: '1',label: 'Bitage'
},{
id: '2',label: 'Blockchain.info'
},{
id: '3',label: 'Coinbase wallet'
},{
id: '4',label: 'Xapo wallet'
}
];
vs.showPopover = function() {
vs.popoverRemove = true;
};
vs.hidePopover = function() {
vs.popoverRemove = false;
};
}]);
解决方法
Plunker给你
问题是ng-repeat创建了它自己的范围.因此,’popoverRemove’是每个范围的局部变量.你可以通过向ng-repeat的特定元素的控制器发送上下文来设置true或false为局部变量并设置它价值使用’this’.
<button class="btn btn-default"
ng-mouSEOver="showPopover(this)"
ng-mouseleave="hidePopover(this)">Remove</button>
vs.showPopover = function(context) {
context.popoverRemove = true;
};
vs.hidePopover = function(context) {
context.popoverRemove = false;
};
