在数组中选中时插入td标记值

时间:2016-03-15 11:01:44

标签: javascript angularjs

我有一张表,其中包含某些类型的数据和复选框。我只需要在选中复选框的情况下将表的数据插入到数组中。这是我的代码。

<table class="table table-bordered table-striped table-condensed flip-content" style="margin-top: 10em;">
<thead class="flip-content">
 <tr>
 <th class="hidden-print">Include</th>
 <th style="text-align: center;">Quantity</th>
                            <th style="text-align: center;" class="hidden-print">Cost(USD)</th>
                            <th style="text-align: center;" class="hidden-print">Markup(%)</th>
                            <th style="text-align: center;" class="hidden-print">Markup Amount</th>
                            <th style="text-align: center;color: #f00;" class="hidden-print">Your Profit(<?php echo $_SESSION['level_markup']; ?>%)</th>
                            <th style="text-align: center;" class="hidden-print">Company Profit</th>
                            <th style="text-align: center;">Price(USD)</th>
                            <th style="text-align: center;">Price Per piece</th>
                            <th style="text-align: center;" class="hidden-print">Actions</th>
                        </tr>
                        </thead>

                        <tbody style="text-align: center;">
                        <?php
                        $x=0;
                        foreach($query_initial as $qurintl)
                        {

                            ?>
                            <tr class="hidden-print">
                             <td class="hidden-print"><input type="checkbox" value="" name="" id="checkbox1"></td>
                                <td> {{ quantity = <?php echo $qurintl['business_quantity']; ?> }} </td>
                                <td class="hidden-print"><input ng-model="basecost_<?php echo $x; ?>" ng-init="basecost_<?php echo $x; ?>=<?php echo $qurintl['business_final_price']; ?>" type="text" </td>
                                <td class="hidden-print"><input ng-model="markup_<?php echo $x; ?>" ng-init="markup_<?php echo $x; ?>=<?php echo $_POST['markupper']; ?>"></td>

                                <td class="hidden-print"> ${{ marukpamount = (basecost_<?php echo $x; ?> * markup_<?php echo $x; ?>) / 100 | number:2 }}</td>

                                <td class="hidden-print" style="color: #f00;"> ${{ yourprofit = (marukpamount * <?php echo $_SESSION['level_markup']; ?>) / 100 | number:2 }}</td>

                                <td class="hidden-print"> ${{ marukpamount - yourprofit | number:2 }}</td>

                                <td> ${{ results = basecost_<?php echo $x; ?> -- (basecost_<?php echo $x; ?> * markup_<?php echo $x; ?>) / 100 | number:0 }}</td>
                                <td>${{ results / quantity  | number:2 }}</td>
                                <td class="hidden-print"><input type="button" class="btn btn-danger" value="-"></td>
                            </tr>
                            <?php
                            $x++;
                        }
                        ?>
                    </tbody>
                    </table>

1 个答案:

答案 0 :(得分:0)

你将角度与PHP混合,这可能不是解决问题的最佳方法。您应该将所有$qurintl添加到javascript数组中,然后按如下方式构建表:

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  $scope.all = [{
    business_quantity: 3,
    business_final_price: 2,
    markupper: 5
  }, {
    business_quantity: 3,
    business_final_price: 3,
    markupper: 2
  }, {
    business_quantity: 3,
    business_final_price: 5,
    markupper: 4
  }];
  $scope.level_markup = 3;
  $scope.selected = [];
  $scope.actualize = function() {
    $scope.selected = $scope.all.filter(function(data) {
      return data.checked;
    });
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

<body ng-app ng-controller="MyCtrl">
  <table class="table table-bordered table-striped table-condensed flip-content" style="margin-top: 10em;">
    <thead class="flip-content">
      <tr>
        <th class="hidden-print">Include</th>
        <th style="text-align: center;">Quantity</th>
        <th style="text-align: center;" class="hidden-print">Cost(USD)</th>
        <th style="text-align: center;" class="hidden-print">Markup(%)</th>
        <th style="text-align: center;" class="hidden-print">Markup Amount</th>
        <th style="text-align: center;color: #f00;" class="hidden-print">Your Profit({{level_markup}}%)</th>
        <th style="text-align: center;" class="hidden-print">Optamark's Profit</th>
        <th style="text-align: center;">Price(USD)</th>
        <th style="text-align: center;">Price Per piece</th>
        <th style="text-align: center;" class="hidden-print">Actions</th>
      </tr>
    </thead>

    <tbody style="text-align: center;">
      <tr ng-repeat="data in all">
        <td class="hidden-print">
          <input ng-click="actualize();" ng-model="data.checked" type="checkbox">
        </td>
        <td>{{data.business_quantity}}</td>
        <td class="hidden-print">
          <input ng-model="data.business_final_price" type="text" />
        </td>
        <td class="hidden-print">
          <input ng-model="data.markupper">
        </td>

        <td class="hidden-print">${{ markupamount = data.business_final_price * data.markupper / 100 | number:2 }}</td>

        <td class="hidden-print" style="color: #f00;">${{ yourprofit = markupamount * level_markup / 100 | number:2 }}</td>

        <td class="hidden-print">${{ marukpamount - yourprofit | number:2 }}</td>
        <td>${{ results = data.business_final_price - (data.business_final_price * data.markupper) / 100 | number:0 }}</td>
        <td>${{ results / data.business_quantity | number:2 }}</td>
        <td class="hidden-print">
          <input type="button" class="btn btn-danger" value="-">
        </td>
      </tr>
    </tbody>

    <div>Your Array: {{selected}}</div>
  </table>
</body>