如何定位ng-repeat中特定項目的ng顯示？

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> 

角控制器：

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-重複創建它自己scope.So， 'popoverRemove' 是每個作用域的局部變量。您可以通過向該特定元素的控制器發送上下文來將真或假設置爲局部變量使用'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至真/假值的，但你得到的將JIST理念！

<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