ul内でng-repeatの内部をクリックして2つのボタンがクリックされています

Question

私はng-clickを自分のタグの中に2つ持っています。 Xボタンをクリックすると、完了ボタンもクリックされます。これは、コレクション内に反復されているオブジェクトが1つしかない場合に発生します。

<ul class="chat-options"> 

    <li ng-repeat="possibleValue in property.PossibleValues track by $index" 
     ng-init="propertyValueIndexIndex = $index" 
     ng-mouseover="EnablePropertyValueEditing(possibleValue)" 
     style="display: inline-block; margin-left: 20px; margin-right: 10px; margin-bottom: 2px; height: 26px;"> 

    <div> 
     <label class="chat-option-name"> 
     {{possibleValue.value}} 
     </label> 

     <!--delete a property value--> 
     <button class="chat-option chat-option-remove" 
       ng-disabled="!possibleValue.edit" 
       ng-click="RemovePropertyValue(property, possibleValue, this)"> 
     X 
     </button> 
    </div> 
    </li> 

    <li style="display: inline-block; margin-right: 10px; margin-bottom: 2px; height: 26px;"> 
    <button class="chat-option-name {{property.Name.replace(' ','_')}}-done" ng-click="DisablePropertyEditing(property)">Done</button> 
    </li> 
</ul> 

Answer 1

あなたのコードに類似したプランナーを作成しました。

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

HTML

<li ng-repeat="x in [1,2,3,4]"> 

<div> 
    <label class="chat-option-name"> 
    {{possibleValue.value}} 
    </label> 

    <!--delete a property value--> 
    <button 
      ng-click="XClick()"> 
    X 
    </button> 
</div> 
</li> 

<li style="display: inline-block; margin-right: 10px; margin-bottom: 2px; height: 26px;"> 
<button class="chat-option-name {{property.Name.replace(' ','_')}}-done" ng-click="DoneClicked();">Done</button> 
</li> 

コントローラ

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
$scope.name = 'World'; 

$scope.XClick = function(){ 
alert('X Clicked'); 
}; 

$scope.DoneClicked = function(){ 
alert('DoneClicked'); 
}; 

}); 

あなたはplunkerで問題を再現することはできますか？

P.S私がコメントするのに十分な評判を持っていないとの回答でこれを追加！