在ng-repeat列表中顯示和隱藏按鈕

Question

我在ng-repeat列表的每個項目中都有一個按鈕。該按鈕默認爲隱藏，我想在用戶選擇列表項目時顯示按鈕，並在用戶選擇另一個列表項目時隱藏該按鈕。我無法得到這個工作，當用戶選擇列表項時，按鈕將保持隱藏狀態。

下面是我迄今嘗試過的代碼的相關位。

的HTML：

<ul ng-repeat="thing in things" role="presentation" id="thing-details" ng-click="selectthing($index)" > 
    <li> 
     <p>Name: {{thing.name}} </p> 

     <button class="btn btn-block" ng-show="false" id="thing-delete" >Delete</button> 
    </li> 
</ul> 

的JS代碼：

$scope.selectthing = function(idx) { 

     $(this).find('ul.btn').show(); // this is not working 

     . 
     . 
     . 
     // do some awesome stuff with the selected thing. 
} 

我的問題是：如何獲得的按鈕，當用戶選擇列表項，以顯示和隱藏的按鈕時，用戶另一個列表項？

Answer 1

你已經基本得到它：

<ul ng-repeat="thing in things"> 
    <li> 
    <p ng-click="$parent.selectedIndex = $index">Name: {{thing.name}}</p> 

    <button class="btn btn-block" 
      ng-show="$parent.selectedIndex == $index">Delete</button> 
    </li> 
</ul> 

見plnkr

Answer 2

你混合角和jQuery，這是滑坡到地獄:)（好吧，警告：指令，但是這是一個不同的故事）。如果您發現自己要在您的控制器中編寫jQuery，那麼警報鈴應該響起，您打破了MVC分離並丟失了更簡單的東西。

這裏的訣竅是讓你的ng-show有條件地確定當前正在渲染的項目是否是選定的項目。要檢測到這一點，請在所選索引的範圍內做一個註釋。是這樣的...

HTML視圖：

<ul ng-repeat="thing in things" role="presentation" id="thing-details" ng-click="selectthing($index)" > 
    <li> 
     <p>Name: {{thing.name}} </p> 

     <button class="btn btn-block" ng-show="$index===selectedIndex" id="thing-delete" >Delete</button> 
    </li> 
</ul> 

JS控制器：

$scope.selectedIndex = -1; 
$scope.selectthing = function(idx) { 

    $scope.selectedIndex = idx; 

    . 
    . 
    . 
    // do some awesome stuff with the selected thing. 
}