在angularjs中选择下拉列表

时间:2017-01-27 07:15:20

标签: angularjs

我的数据来自数据库,并希望以角度选择下拉列表。

来自数据库和字段名称的付款状态为payment_status 对于Ex-如果付款状态为PENDING,则选择Payment Pending,否则收到付款

这是我的代码。

<div ng-repeat="product in data" class="order-received animated fadein delay-1">
<div class="order-header">
  <img class="avatar rectangle" src="img/user4.jpg" alt="">
  <div class="order-author">
    <span style="color:#cc0066;">{{product.GLname}} - {{product.mobno}}</span>
    <span class="small">Item - {{product.item_name}} ({{product.item_code}})</span>
    <span class="small">Qty - {{product.pqty}} Amt - Rs. {{product.rate}}</span>
    <select class="browser-default" style="margin-bottom:8px;" ng-model="paymentOption">
      <option value="RECEIVED">Payment Received</option>
      <option value="PENDING">Payment Pending</option>
    </select>
    <select class="browser-default" ng-model="orderOption">
      <option value="NEW">New Order</option>
      <option value="PROCESS">In Progress</option>
      <option value="SENT">Sent</option>
      <option value="DELIVERED">Delivered</option>
      <option value="CANCELLED">Cancelled</option>
    </select>               
  </div>
</div>            

请帮忙!!!

3 个答案:

答案 0 :(得分:2)

您必须更改model值才能在选择

中显示某些内容

由于你说你有字段payment_status,你可以使用

<强> ng-model="product.payment_status"

这是html,

<div ng-repeat="product in data" class="order-received animated fadein delay-1">
<div class="order-header">
  <img class="avatar rectangle" src="img/user4.jpg" alt="">
  <div class="order-author">
    <span style="color:#cc0066;">{{product.GLname}} - {{product.mobno}}</span>
    <span class="small">Item - {{product.item_name}} ({{product.item_code}})</span>
    <span class="small">Qty - {{product.pqty}} Amt - Rs. {{product.rate}}</span>
    <select class="browser-default" style="margin-bottom:8px;" ng-model="product.payment_status">
      <option value="RECEIVED">Payment Received</option>
      <option value="PENDING">Payment Pending</option>
    </select>
    <select class="browser-default" ng-model="orderOption">
      <option value="NEW">New Order</option>
      <option value="PROCESS">In Progress</option>
      <option value="SENT">Sent</option>
      <option value="DELIVERED">Delivered</option>
      <option value="CANCELLED">Cancelled</option>
    </select>               
  </div>
</div>    

答案 1 :(得分:0)

您只需在控制器中定义paymentOption值:

就像控制器一样

$scope.paymentOption = success.payment_status // value fetch from database

答案 2 :(得分:-1)

您应该将“paymentOption”设置为控制器中“选择”中的一个值。