User123 User123 - 11 months ago 57
Javascript Question

How to hide the delete button when I call onClick function to it

I am working on a code where I need to have an option of deleting.

When you click on any of the number listed you will get and (button) option to delete. but Iam unable to hide (Delete button) once the button is clicked.

Can any guide me how to do this.


<li ng-repeat="e in arr track by $index">
<span ng-click="$parent.selectedIndex=$index">{{ e }} <button ng-show="$parent.selectedIndex == $index" >delete</button></button></span>

Answer Source

I'm assuming you wanted to only hide delete button once its click(when visible)

Change you ng-click to toggle selectedIndex value

ng-click="$parent.selectedIndex!=$index?$parent.selectedIndex=$index:$parent.selectedIndex = null"

Demo Plunkr

Cleaner solution without using $parent notation

<p>click to select:</p>
  <li ng-repeat="e in arr track by $index">
    <span ng-click="changeIndex($index)">{{ e }} 
      <button ng-show="selectedIndex == $index">delete</button></button>


$scope.arr = [1,2,3,4,5];
$scope.selectedIndex = undefined;
$scope.changeIndex = function(index){
  return $scope.selectedIndex != index? $scope.selectedIndex=index:$scope.selectedIndex = null

Update Plunkr

Though using $parent anotation before scope variable creates a tight coupling between variable, instead I'd prefer you to use Dot Rule while defining model in angular OR another best way would be to use follow controllerAs pattern while defining models.