如何针对ng-repeat中的特定项目进行ng-show?

里昂·加班

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的特定元素的控制器发送上下文并将其设置为使用“ 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;
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何仅针对单击angularJS ng-show和ng-hide的表行定位

如何在该范围外声明的变量上的ng-repeat内进行ng-show?

Ng-show在ng-repeat中未更新

使用更新的日期对 ng-repeat 中的项目进行分组

如何在ng-repeat中显示数组的特定字母项目?

如何验证使用ng-repeat,ng-show(角度)动态创建的输入

角度失败将元素的ng-show绑定到ng-repeat中

AngularJS:ng-show显示ng-repeat中$索引的最高值

对ng-repeat表中的特定行进行ng-switch

如何让 ng-show 在 AngularJS 指令中工作?

如何基于服务中的变量设置ng-show

在“ng-repeat”中使用“ng-show”,

ng-show在ng-repeat内部未更新

AngularJS:ng-show

AngularJS ng-if ng-show /隐藏在ng-repeat中隐藏所有div

我如何获得ng-repeat中的项目总数

AngularJs:ng-repeat =“ arrayValue中的项目”

如何在一格中声明ng-show和ng-hide

如何使用ng-show / ng-hide隐藏Angular Bootstrap UI中的选项卡

AngularJS仅对ng-repeat表中的前两个项目进行排序

如何在ng-repeat中对JSON数据进行排序?

如何在ng-repeat中进行ng-repeat?

带有ng-repeat,ng-show“ Show more”和延迟加载的Angular指令

AngularJS-如何在ng-repeat中正确使用ng-show?我的布尔值没有更新

如何使用ng-show,ng-change和ng-class样式验证提示/错误

如何使ng禁用以检查ng-repeat中的项目值(使用AngularJS)

元素中的角度ng-repeat条件包装项目(ng-repeat中的组项目)

ng-repeat中的自定义顺序仅对特定数据进行排序

在setTimeout中修改ng-show