2016-08-01 55 views
0

當我點擊評論或回覆鏈接時,表單正在爲所有卡片開放。如何製作一個特定的範圍,以便表單只能打開鏈接所點擊的範圍。ng-if條件無法正常工作[AngularJS]

下面的函數與html中的ng-if一起使用來隱藏表單。一旦點擊它應該只打開相應的表單。

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

Here is plukr link

+1

你在這裏的錯誤是你綁定相同的對象(_reply)所有的評論部分的實例。相反,嘗試不同的對象,然後嘗試一下。 –

+0

是的,正如@JenishRabadiya所說的,每個ng-if都使用同一個對象'_reply',每次創建一個對象數組或者創建不同的對象。 –

回答

1

你應該分配replyActive位爲每個評論。要做到這一點,你可以使用迭代對象(我假設你正在使用ng-repeat)。您可以交互添加一個屬性到對象中並自由使用它。

簡單的例子;

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>

片段#2失敗,我不知道爲什麼。檢查這個小提琴,http://jsfiddle.net/Lvc0u55v/7762/