私はそれにonClick関数を呼び出すと、削除ボタンを非表示にする方法

Question

私は削除のオプションが必要なコードに取り組んでいます。

数字のいずれかをクリックすると、削除する（ボタン）オプションが表示されます。ボタンをクリックするとIamは非表示にすることはできません（削除ボタン）。

どのようにこれを行うに私をガイドすることができます。

Example

<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

---

クリーナー溶液

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

Update Plunkr

スコープ可変前$parent注釈を使用して変数間の密結合を作成したが、代わりに私が好む$parent表記を使用せずmodを定義しながらDot Ruleを使用するエルの角度または別の最善の方法は、モデルを定義しながら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（コントローラには、ボタンの状態変数を追加するときの理由clickイベントがspanおよびliタグに伝播するボタンをクリックします。またbuttonClickedをfalseに再度設定します。