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

发布时间：2020-12-17 17:20:54 所属栏目：安全来源：网络整理

导读：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/di

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;
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!