如果第一个字段相同,我想将表格行显示为内部表格行

时间:2017-01-15 05:20:10

标签: javascript html angularjs

<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相同,那么我只需将其放置一次,并在tr

中添加td

我得到一张这样的表

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>

ng-click无效。我已经包含了一个像第一次没有来自0其他1的索引

2 个答案:

答案 0 :(得分:0)

我能够通过使用工厂重组数据来实现这一目标,因此看起来更像是这样:

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

从那里,我使用嵌套表格显示每个订单号码的数据,并在+和 - 按钮上添加了一个ng-click事件,以便用其编号切换其他书籍。

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

这是一个显示我的解决方案的codepen:http://codepen.io/anon/pen/EZqObO

答案 1 :(得分:0)

我无法使用角度函数,所以我使用基本的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-click

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


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