ng-if条件不能正常工作[AngularJS]

时间:2016-08-01 11:55:37

标签: javascript jquery angularjs angular-ng-if

当我点击评论或回复链接时,表格将打开所有卡片。如何进入特定范围,以便只打开单击链接的表单。

以下函数与html中的ng-if一起使用以隐藏表单。一旦单击它就应该只打开相应的表单。

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

Here is plukr link

1 个答案:

答案 0 :(得分:1)

您应为每条评论指定replyActive位。为此,您可以使用迭代对象(我假设您正在使用ng-repeat)。您可以交互式地向对象添加一个属性并自由使用它。

简单的例子;

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

function MyCtrl($scope) {
 	$scope.commentList = [
    	{
      	"author": "Tugca Eker",
        "comment": "You should check this example..."
      },
      {
      	"author": "Gagan",
        "comment": "ng-if not working"
      },
      {
      	"author": "Tugca Eker",
        "comment": "Check it again"
      }
    ];
  	
}
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上的

Snippet失败了,我不知道为什么。检查这个小提琴,http://jsfiddle.net/Lvc0u55v/7762/