I want to display the table row as the internal table of the table, if the first field is the same as this

Question

<tr ng-model="check" ng-repeat="orderBook in orderBookDetails| orderBy: 'orderBook.no'" value='check=$scope.orderBookDetails.sowNo'> <td ng-if='check!=orderBook.no'>{{orderBook.no}}</td> <td>{{orderBook.location}}</td> <td>{{orderBook.finYr}}</td> <td ng-if='orderBook.amount1'>{{orderBook.amount1}}</td> <td ng-if='!orderBook.amount1'></td> <td ng-if='orderBook.amount2'>{{orderBook.amount2}}</td> <td ng-if='!orderBook.amount2'></td> <td ng-if='orderBook.amount3'>{{orderBook.amount3}}</td> <td ng-if='!orderBook.amount3'></td> <td>{{orderBook.amount1--orderBook.amount2--orderBook.amount3}}</td> <td ng-if='orderBook.amount4'>{{orderBook.amount4}}</td> <td ng-if='!orderBook.amount4'></td> <td> <button ng-click="getOrderBookDetails(orderBook.sowNo,orderBook.sowStartDate,orderBook.sowEndDate, orderBook.sowValuetoUSD);" class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Update</button> 

If orderBook.no the same then I have to post it only once and add tr to td

I get a table like this

 SOW No Location Year Jan Feb March Cum Q4 update 001 italy 2016 1000 1000 Update 001 italy 2017 9000 12000 21000 Update 002 england 2017 1000 2000 3000 Update 

But I need a table like

 SOW No Location Year Jan Feb March Cum Q4 update 001 italy + 2016 1000 1000 Update 002 england - 2017 1000 2000 3000 Update 

Press the plus button, I need to display

  SOW No Location Year Jan Feb March Cum Q4 update 001 italy - 2016 1000 1000 Update 2017 9000 12000 21000 002 england - 2017 1000 2000 3000 Update 

with one refresh button for each row. I implemented as

 <tr id="hideRow" ng-model="counter" value="counter=1" ng-repeat="orderBook in orderBookDetails| orderBy: 'orderBook.no'" ng-if='orderBook.index==0'> <td>{{orderBook.index}}</td> <td><img alt="Expand row" height="20px;" ng-src="library/image/expand.jpg" onclick="showRow('orderBook.no')">{{orderBook.no}}</td> <td>{{orderBook.location}}</td> <td>{{orderBook.finYr}}</td> <td ng-if='orderBook.amount1'>{{orderBook.amount1}}</td> <td ng-if='!orderBook.amount1'></td> <td ng-if='orderBook.amount2'>{{orderBook.amount2}}</td> <td ng-if='!orderBook.amount2'></td> <td ng-if='orderBook.amount3'>{{orderBook.amount3}}</td> <td ng-if='!orderBook.amount3'></td> <td>{{orderBook.amount1--orderBook.amount2--orderBook.amount3}}</td> <td ng-if='orderBook.amount4'>{{orderBook.amount4}}</td> <td ng-if='!orderBook.amount4'></td> <td><button ng-click="getOrderBookDetails(orderBook.sowNo,orderBook.sowStartDate,orderBook.sowEndDate, orderBook.sowValuetoUSD);" class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Update</button> </tr> <tr id="reloadRow" ng-repeat="orderBook in orderBookDetails| orderBy: 'orderBook.no'" ng-if='(orderBook.index!=0 || orderBook.no==$scope.curNo) && orderBook.no!=0'> <td>{{orderBook.index}}+0</td> <td><a ng-click="showRow('orderBook.no')"><img alt="Hide row" height="20px;" ng-src="library/image/sow2.png"></a>{{orderBook.no}}</td> <td>{{orderBook.location}}</td> <td>{{orderBook.finYr}}</td> <td ng-if='orderBook.amount1'>{{orderBook.amount1}}</td> <td ng-if='!orderBook.amount1'></td> <td ng-if='orderBook.amount2'>{{orderBook.amount2}}</td> <td ng-if='!orderBook.amount2'></td> <td ng-if='orderBook.amount3'>{{orderBook.amount3}}</td> <td ng-if='!orderBook.amount3'></td> <td>{{orderBook.amount1--orderBook.amount2--orderBook.amount3}}</td> <td ng-if='orderBook.amount4'>{{orderBook.amount4}}</td> <td ng-if='!orderBook.amount4'></td> <td><button ng-click="getOrderBookDetails(orderBook.sowNo,orderBook.sowStartDate,orderBook.sowEndDate, orderBook.sowValuetoUSD);" class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal" disable="disabled">Update</button> </tr> 

ng-click does not work. I included the index as the first time, but no. 0 else 1

Answer 1

I can't work with angular function, so I did with basic functions like jquery

  <tr id="reloadRow" ng-repeat="orderBook in orderBookDetails| limitTo : 10 | orderBy: 'orderBook.no'" ng-if='orderBook.index==0 || orderBook.no==curNo'> <td>{{orderBook.index}}</td> <td ng-if='orderBook.index==0 && orderBook.no==curNo'><img alt="Hide row" height="20px;" ng-src="library/image/minimize.jpg" ng-click="hideRow()">&nbsp;{{orderBook.no}}</td> <td ng-if='orderBook.index==0 && orderBook.no!=curNo'><img alt="Hide row" height="20px;" ng-src="library/image/expand.jpg" ng-click="showingfull(orderBook.no)">&nbsp;{{orderBook.no}}</td> <td ng-if='orderBook.index!=0'></td></tr> 

Used ng-click with two images + and -, index, curNo variables and two functions

 $scope.showingfull = function(sowNo) { alert("Inside brand new showing method"); $scope.curNo = sowNo; } $scope.hideRow = function() { $scope.curNo = 0; } 

Answer 2

I managed to get this to work, reorganizing the data with the factory, so it looked something like this:

 $scope.orderBookDetails = { '001':[ { location:'Italy', finYr:'2016', amount1:1000, amount2:2000 }, { location:'Italy', finYr:'2017', amount1:1000 } ], '002':[ ..etc.. ] } 

From there, I used nested tables to display data for each OrderBook number and added the ng-click event to the + and - buttons to switch other books with that number.

 <table> <tr> <th>SOW No</th> <th>Location</th> <th>Year</th> <th>Jan</th> <th>Feb</th> <th>March</th> <th>Cum Q4</th> <th>Update</th> </tr> <tr ng-repeat="(key,orderBook) in orderBookDetails"> <td class="no_td">{{ key }}</td> <td colspan="7"> <table ng-repeat="book in orderBook" class="book" ng-if="$index == 0 || orderBook.expanded"> <tr> <td>{{ book.location }}</td> <td> <button class="expander" ng-click="expandBooks(orderBook)" ng-if="$index == 0"> <span ng-if="!orderBook.expanded && orderBook.length > 1">+</span> <span ng-if="orderBook.expanded || orderBook.length <= 1">-</span> </button> <span class="spacer" ng-if="$index > 0"></span> {{ book.finYr }} </td> <td>{{ book.amount1 }}</td> <td>{{ book.amount2 }}</td> <td>{{ book.amount3 }}</td> <td>{{ book.amount1 + book.amount2 + book.amount3 }}</td> <td><button ng-click="getOrderBookDetails(orderBook)" class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Update</button></td> </tr> </table> </td> </tr> </table> 

Here is the code showing my solution: http://codepen.io/anon/pen/EZqObO