Make selected dropdown in angularjs

Question

My data is coming from database and want to make dropdown selected in angular.

Payment status coming from database and field name is payment_status For Ex- if payment status is PENDING then selected Payment Pending otherwise Payment Received

Here is my code.

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

Please help!!!

What do you mean by make dropdown selected in Angular? You want to have a default selected option in your select element? — prtdomingo
– prtdomingo, Commented Jan 27, 2017 at 7:16

Sravan · Accepted Answer · 2017-01-27 07:26:02Z

You have to change the model value to display something in the select

Since you said that you have field payment_status, you can use

ng-model="product.payment_status"

Here is the 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>

@ArvindJaiswal, GLad to help you. you can accept my answer if you find it useful.

Kumar Rakesh · Accepted Answer · 2017-01-27 07:23:03Z

0

You just define paymentOption value in controller :

as like in controller

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

answered Jan 27, 2017 at 7:23

Kumar Rakesh

2,7082 gold badges20 silver badges39 bronze badges

Comments

campino2k · Accepted Answer · 2017-01-27 07:21:44Z

-1

You should set "paymentOption" to one of the values in the Select in the controller.

answered Jan 27, 2017 at 7:21

campino2k

1,6711 gold badge14 silver badges25 bronze badges

Collectives™ on Stack Overflow

Make selected dropdown in angularjs

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related