DrkStr DrkStr - 1 month ago 12
Javascript Question

Show and hide button in ng-repeat list

I have a button in every item of my ng-repeat list. The button is hidden by default, I want to show the button when the user selects the list item and hide the button when the user selects another list item. I am not able to get this to work, the button stays hidden when the user selects the list item.

Here are the relevant bit of code from what I have tried so far.

The 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>


The JS code:

$scope.selectthing = function(idx) {

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

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


My question is: How do I get the button to show when the user selects the list item and hide the button when the user another list item ?

Answer

You've almost got it:

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

See plnkr

Comments