Question

我需要按下addOrder按钮时，复选框选中的元素会添加到模态对话框表中。

我认为一个选项是创建一个数组，并通过ng-repeat填充另一个表，但我不知道该怎么做。

餐厅桌

<!DOCTYPE html>  
        <div>
      <table class="table table-condensed table-hover">
        <thead>
          <tr>
            <th>#Código
            </th>
            <th>Descripción
            </th>
            <th>Precio
            </th>
            <th>Cantidad
            </th>
          </tr>
        </thead>
        <tbody id="restaurant_table">
          <tr ng-repeat="product in object">
            <td>
              <span ng-bind="product.idProducto"></span>
            </td>
            <td>
              <span ng-bind="product.descripcionProducto"></span>
            </td>
            <td>
              <span ng-bind="(product.precioProducto | currency:'₡')"></span>
            </td>        
            <td>
              <div class="input-group">
                <input ng-model="product.cantidadProducto" type="text" class="form-control" min="0" value="1" />
              </div>
            </td>
            <td>
              <input type="checkbox" ng-checked="addItem(product);">
            </td>
          </tr>
        </tbody>
      </table>
      <!--addOrder button-->
      <button ng-click="addOrder();" type="button" class="btn btn-success" data-toggle="modal" data-target="#new-order-modal">Add</button>

    </div>

addItem方法（ng-checked）。我需要添加多个元素

$scope.elements = {};    
$scope.addItem = function (product) {
        $scope.elements.push({
            id: product.idProducto,
            descripcion: product.descProducto,
            cantidad: product.cantidadProducto,
            precio: product.precioProducto
        });

addOrder方法。使用元素{}填充模态对话框表。我该怎么办？

$scope.addOrder = function () {
  //code
};

订单模式对话表

<!DOCTYPE html>    
<div id="new-order-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" aria-hidden="true" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
            <table>
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Producto</th>
                  <th>Cantidad</th>
                  <th>Costo</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in elements">
            <td>{{item.id}}</td>
                  <td>{{item.descipcion}}</td>
                  <td>{{item.cantidad}}</td>
                  <td>{{item.precio| currency:"₡"}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Confirm</button>
        </div>
      </div>
    </div>
  </div>

Answer 1

有一个工作订单添加示例..只需使用该逻辑。

＆＃13;

var app = angular.module("app", []);

function Product(id, descProducto, cantidadProducto, precioProducto)
{

this.idProducto = id;
this.descProducto = descProducto;
this.cantidadProducto = cantidadProducto;
this.precioProducto = precioProducto;
}


app.controller("ctrl", function($scope)
{


$scope.orderlist = [];
$scope.myProducts = [];
//adding random products
for(var i = 0; i < 10; i++ )
{

  $scope.myProducts.push(new Product(i, "product"+i, "cantidal"+i, "precio"+i))

}


//adds checked items to orderlist
$scope.addOrder = function() {
  this.orderlist = [];
  
  for(var i = 0; i < this.myProducts.length; i++ )
  {
    if(this.myProducts[i].checked == true)
     {
      this.orderlist.push(angular.extend({},this.myProducts[i]));
     }
  }
 
};



});

＆＃13;

<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.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body ng-app="app" ng-controller="ctrl" >
        <div>
      <table class="table table-condensed table-hover">
        <thead>
          <tr>
            <th>#Código
            </th>
            <th>Descripción
            </th>
            <th>Precio
            </th>
            <th>Cantidad
            </th>
          </tr>
        </thead>
        <tbody id="restaurant_table">
          <tr ng-repeat="product in myProducts track by $index">
            <td>
              <span ng-bind="product.idProducto"></span>
            </td>
            <td>
              <span ng-bind="product.descripcionProducto"></span>
            </td>
            <td>
              <span ng-bind="(product.precioProducto | currency:'₡')"></span>
            </td>        
            <td>
              <div class="input-group">
                <input ng-model="product.cantidadProducto" type="text" class="form-control" min="0" value="1" />
              </div>
            </td>
            <td>
              <input type="checkbox" ng-model="product.checked">
            </td>
          </tr>
        </tbody>
      </table>
      <!--addOrder button-->
      <button ng-click="addOrder();" type="button" class="btn btn-success" data-toggle="modal" data-target="#new-order-modal">Add</button>

    </div>
    
    
    
    <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" aria-hidden="true" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
            <table>
              <thead>
                <tr>
                  <th>Id</th>
                  <th>Producto</th>
                  <th>Cantidad</th>
                  <th>Costo</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="item in orderlist track by $index">
            <td>{{item.idProducto}}</td>
                  <td>{{item.descProducto}}</td>
                  <td>{{item.cantidadProducto}}</td>
                  <td>{{item.precioProducto| currency:"₡"}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Confirm</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

＆＃13;

Angular - 通过另一个表

1 个答案: