如果第一个字段与如何执行此操作相同，则希望将表行显示为内表行。

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>

如果orderBook.no是相同的，那么我只能放置一次，并在td中添加一个tr

我有一张这样的桌子

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

但我需要一张像

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

单击加号按钮，我需要显示

 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

每行都有一个更新按钮。我已经实现了

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

吴-点击不起作用。我已经包含了一个索引，就像第一次出现0其他1一样。

Answer 1

我无法处理角函数，所以我使用了基本的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>

使用两个图像+和-、索引、curNo变量和两个函数的ng单击。

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


$scope.hideRow = function() {
                    $scope.curNo = 0;
                }

Answer 2

通过使用工厂对数据进行重组，我能够让它工作起来，所以它看起来更像这样：

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

在那里，我使用嵌套表显示每个orderBook编号的数据，并在+和-按钮中添加了一个ng单击事件，以切换其他带有该数字的书籍。

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

下面是显示我的解决方案的代码库：http://codepen.io/anon/pen/EZqObO