I have a table of bookings in which the last field is of status with dropdown as
<td><select id="selectID" ng-selected="{{data.status}}">
<option value="1">New</option>
<option value="2">To Be Approved</option>
<option value="3">Cancelled</option>
<option value="4">Rejected</option>
<option value="5">Approved</option>
<option value="6">On The Way</option>
<option value="7">Delivered</option>
<option value="8">Ongoing</option>
<option value="9">Checkedout</option>
<option value="10">Completed</option>
<option value="11">Invoice Pending</option>
<option value="12">Invoice Sent/Payment Pending</option>
<option value="13">Green</option>
</select> </td>
I receive the value of status in the JSON as a number between 1-12. I want to pre-select every drop-down when i load my table . eg If JSON has status as 2 , then default selected in the row with status must be "To be approved" and so on . I have looked a lot , but all i could find was ng-options which is used to populate the select tag , but i don't receive them in the JSON so i have hard coded it in the <td> tags where each row is working on ng-repeat. Also , I thought of using .val function but i guess for different rows i might have to set different ids.
Just use AngularJS data binding with ng-model
HTML:
<div ng-app="myApp" ng-controller="dummy">{{data.status}}
<td>
<select id="selectID" ng-model="data.status">
<option value="1">New</option>
<option value="2">To Be Approved</option>
<option value="3">Cancelled</option>
<option value="4">Rejected</option>
<option value="5">Approved</option>
<option value="6">On The Way</option>
<option value="7">Delivered</option>
<option value="8">Ongoing</option>
<option value="9">Checkedout</option>
<option value="10">Completed</option>
<option value="11">Invoice Pending</option>
<option value="12">Invoice Sent/Payment Pending</option>
<option value="13">Green</option>
</select>
</td>
</div>
JS:
angular.module('myApp', [])
.controller('dummy', ['$scope', function ($scope) {
$scope.data = {
status: 2
};
}]);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments