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

So you want to create a reply inside of reply? Or do you mean when clicking helpful from reply its not going to a right place? — Konkko
– Konkko, Commented Mar 30, 2016 at 12:58
yes it is not going to a right place for some helpful links for example : if we click helpful then it is showing all the text with the same index — Gagan Sharma
– Gagan Sharma, Commented Mar 30, 2016 at 13:15

Konkko · Accepted Answer · 2016-03-30 14:20:51Z

2

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 :)

edited Mar 30, 2016 at 14:20

answered Mar 30, 2016 at 13:35

Konkko

6624 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gagan Sharma Over a year ago

function name is addHelpful or increaseHelpful as addHelpful function is visible to me

Konkko Over a year ago

sorry yes I mean increaseHelpful

Konkko Over a year ago

Was this what you were looking for?

Gagan Sharma Over a year ago

yeah something like this

GnG · Accepted Answer · 2016-03-30 20:17:57Z

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;
  };

edited Mar 30, 2016 at 20:17

answered Mar 30, 2016 at 15:52

GnG

213 bronze badges

2 Comments

Gagan Sharma Over a year ago

what is the use ng-init="reply.reply=object" ??

GnG Over a year ago

Oh sorry I left that there. First I thought of making an object inside the reply which create and object inside the object that would allow you to iterate so it would make a tree of replies if needed.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related