如何将 ng-show 定位到 ng-repeat 中的特定项目？

Question

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 控制器：

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

    }]);

Answer 1

Plunker 给你

事情是 ng-repeat 创建它自己的 scope.So，'popoverRemove' 是每个 scope.You 的局部变量，可以通过将上下文发送到控制器来为局部变量设置 true 或 false 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;
};

Answer 2

您还可以在每次迭代时创建一个属性，如下所示：

我没有在作用域上调用函数，而是简单地将 well.show 的值设置为 true/false，但你明白了这个想法的要旨！

    <li ng-repeat="acc in accounts track by $index">
      <div class="well well-sm">
        <div class="popover-remove" ng-show="well.show">Click to remove item</div>
        <h4>{{acc.label}}</h4>
        <button class="btn btn-default"
                ng-mouseover="well.show=true"
                ng-mouseleave="well.show=false">Remove</button>
      </div>
    </li>

Plunker updated

Answer 3

将 popOverRemove 移动到每个帐户。然后您可以从每个子范围控制它。也更新您的 showPopover/hidePopover。

vs.accounts = [
    {
        id: '1',
        label: 'Bitage',
        popoverRemove: false
    },
    {
        id: '2',
        label: 'Blockchain.info',
         popoverRemove: false
    },
    {
        id: '3',
        label: 'Coinbase wallet',
       popoverRemove: false
    },
    {
        id: '4',
        label: 'Xapo wallet',
        popoverRemove: false
    }
];

我在这里更新了

http://plnkr.co/edit/uAjhiYTDyXIBmkxAQzzw?p=preview

如何将 ng-show 定位到 ng-repeat 中的特定项目？

How to target ng-show on specific items in ng-repeat?

angularjs

angularjs-ng-repeat

angular-ngmodel