ng-if条件が正しく動作しない[AngularJS]

Question

コメントまたは返信リンクをクリックすると、すべてのカードがフォームに表示されます。リンクがクリックされたフォームのみを開くような特定のスコープを作成する方法。

以下の関数は、htmlのng-ifでフォームを非表示にするために使用されます。クリックすると対応するフォームのみが開きます。

$scope.increaseReply = function(object) { 
    object.replyone += 1; 
}; 

Here is plukr link

Answer 1

あなたは、各コメントのためにreplyActiveビットを割り当てる必要があります。これを行うには、繰り返しオブジェクトを使用できます（ng-repeatを使用していると仮定しています）。オブジェクトにもう1つのプロパティを対話的に追加し、自由に使用できます。

単純な例;

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

 
function MyCtrl($scope) { 
 
    \t $scope.commentList = [ 
 
    \t { 
 
     \t "author": "Tugca Eker", 
 
     "comment": "You should check this example..." 
 
     }, 
 
     { 
 
     \t "author": "Gagan", 
 
     "comment": "ng-if not working" 
 
     }, 
 
     { 
 
     \t "author": "Tugca Eker", 
 
     "comment": "Check it again" 
 
     } 
 
    ]; 
 
    \t 
 
}

ul li{ 
 
    padding: 5px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="MyCtrl"> 
 

 
    <ul> 
 
    <li ng-repeat="comment in commentList" ng-init="comment.isReplyActive = false;"> 
 
     <b>{{comment.author}}</b>: {{comment.comment}} 
 
     <br /> 
 
     <a ng-click="comment.isReplyActive = !comment.isReplyActive;">Reply Now!</a> 
 
     <div ng-if="comment.isReplyActive"> 
 
     <input type="text"> 
 
     </div> 
 
    </li> 
 
    </ul> 
 
    
 
</div>

StackOverflowの上のスニペット失敗し、私は理由を知りません。このフィディーズをチェックしてください。http://jsfiddle.net/Lvc0u55v/7762/