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>
Angular Controller :
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 的特定元素的 Controller 来将 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;
};
关于angularjs - 如何将 ng-show 定位到 ng-repeat 中的特定项目上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29396270/