2016-08-01 18 views
0

Wenn ich auf Kommentar oder Antwort-Link klicke, öffnet sich das Formular für alle Karten. Wie zu einem bestimmten Bereich zu machen, so dass das Formular nur geöffnet werden soll, auf den der Link geklickt wird.ng-wenn Bedingung nicht richtig funktioniert [AngularJS]

Die folgende Funktion wird mit ng-if in der HTML verwendet, um das Formular zu verbergen.Ein Klick darauf sollte nur das entsprechende Formular öffnen.

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

Here is plukr link

+1

Ihr Fehler hier ist, dass Sie das gleiche Objekt (_reply) an alle Instanzen der Kommentarabschnitte binden. probiere stattdessen ein anderes Objekt mit jedem aus und probiere es dann aus. –

+0

Ja, wie @JenishRabadiya sagte, Sie verwenden dasselbe Objekt '_reply' für jedes ng-if, entweder erstellen Sie ein Array von Objekten oder erstellen jedes Mal ein anderes Objekt. –

Antwort

1

sollten Sie replyActive Bit für jeden Kommentar zuordnen. Um dies zu tun, können Sie Iterationsobjekte verwenden (ich nahm an, dass Sie ng-repeat verwenden). Sie können Ihrem Objekt interaktiv eine weitere Eigenschaft hinzufügen und diese frei verwenden.

Einfaches Beispiel;

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>

Snippet auf Stackoverflow nicht, ich weiß nicht, warum. Überprüfen Sie diese Geige, http://jsfiddle.net/Lvc0u55v/7762/