当我调用onClick函数时如何隐藏删除按钮

Question

我正在编写需要删除选项的代码。

当您单击列出的任何数字时，您将获得和（按钮）选项删除。 但是单击该按钮后Iam无法隐藏（删除按钮）。

任何人都可以指导我如何做到这一点。

例

    <ul>
   <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>
    </li>
  </ul>

Answer 1

我假设您只想在单击后隐藏删除按钮（可见时）

更改您的ng单击以切换selectedIndex值

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

Demo Plunkr

---

无需使用$parent标记的更干净的解决方案

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

调节器

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

更新Plunkr

尽管在范围变量之前使用$parent注释会在变量之间创建紧密的耦合，但我更希望您在以角度OR定义模型时使用Dot Rule ，另一种最佳方法是在定义模型时使用follow controllerAs模式。

Answer 2

只需将状态变量添加到按钮

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

将此添加到控制器

$scope.buttonClicked=false;

$scope.toggleButton = function(e) {
  $scope.buttonClicked=!$scope.buttonClicked;
  e.stopPropagation()
}

然后

<span ng-click="$parent.selectedIndex=$index; $parent.buttonClicked=false">{{ e }} <button ng-show="$parent.selectedIndex == $index && !$parent.buttonClicked" ng-click="$parent.toggleButton($event)">delete</button></span>

e.stopPropagation（）是必需的，因为当您单击按钮时，单击事件也会传播到span和li标签，并且将buttonClicked再次设置为false。