nested ng-repeat index not working || nested ng-click not working

Question

if we create two or three comment with multiple replies to them the "helpful" link is causing problem when clicked it perform ng-click operation on the index with same number thus showing all the text with same index. how to resolve this nesting so that when a link is clicked only the respective text is shown

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

the ng-click and ng-show operation are working through myDiscuss controller

 var app = angular.module("myDiscuss", []); app.controller("TabController", function($scope) { $scope.subTab = null; $scope.subLike=null; $scope.selectSubLike = function (setTab) { $scope.subLike=setTab; } $scope.selectSubTab = function(setTab){ $scope.subTab = setTab; }; $scope.isSelectedSub = function(checkTab){ return $scope.subTab === checkTab; }; $scope.isSelectedSubLike = function(checkTab){ return $scope.subLike===checkTab; }; }); 

For html file look in the plunker link.

Helpful and Reply link are in the reply-link.html file

Answer 1

Here is a Plunker: http://plnkr.co/edit/PQ36lMXR1YOs8DP7WXMk?p=preview

What I did is added helpful: 0 to both comment and reply objects. Also added <p ng-if="object.helpful">{{ object.helpful }} </p> to comment-section.html and reply-box.html

Then when clicking on the helpful added a new function called increaseHelpful(object) where you increase the helpful variable by one on each click. Of course you need to make it that one user can only click it once but just for example :)

Answer 2

Get the index1 also in so you can get the reply box where you click the reply button. Use selectSubTab(index, index1) and then have two variables in $scope.subTab to check what is selected.

Edited from Konkko's plnkr http://plnkr.co/edit/lbn57aPTJQpgzMaQPW6t?p=preview

reply-box.html

<div  id ="wrapper">
  <form ng-submit="replysubmit()" ng-controller="BlockController">
    <div class="clearfix" ng-if="isSelectedSub(index)">

      <input type="textarea" tabindex="0"
      style="overflow: auto; max-height: 350px; margin-top:1px;" class ="col-sm-8 col-md-8 col-lg-11" ng-model="reply.comment"
      name="reply.comment" placeholder="Write a Reply" />
    </div>
    <blockquote  ng-repeat="(index1,object) in replybox">
      <h4>Name</h4>
      <p>
        {{object.comment}} {{index1+1}}
      </p>
      <p ng-if="object.helpful">{{ object.helpful }} </p>
      <ul reply-links></ul>
      <div class="clearfix" ng-if="isSelectedSub(index, index1)">

        <input type="textarea" tabindex="0"
        style="overflow: auto; max-height: 350px; margin-top:1px;" class ="col-sm-8 col-md-8 col-lg-11" ng-model="reply.comment"
        name="reply.comment" placeholder="test" />
      </div>
    </blockquote>
  </form>
</div>

reply-links.html:

<ul class="nav nav-pills">
    <li>
      <a href ng-click="increaseHelpful(object)" class="glyphicon ">Helpful</a>
    </li>
    <li>
      <a href ng-click="selectSubTab(index, index1)" class="glyphicon" >Reply</a>
    </li>
</ul>

JS:

$scope.subTab = {first: null, second: null};

$scope.selectSubTab = function(setTab, setTab1){
    console.log(setTab);console.log(setTab1);
    $scope.subTab = {first: setTab, second: setTab1};
  };

$scope.isSelectedSub = function(checkTab, checkTab1){
    return $scope.subTab.first === checkTab && $scope.subTab.second === checkTab1;
  };