Pre-select the dropdown select option according to value received
Question
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.
2 answers
solution1
1 ACCPTED 2015-08-02 20:00:40
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
};
}]);
solution2
0 2015-08-02 19:55:11
ng-selected works on option tag and not on select tag.
See this snippet:
angular.module('testApp', []) .controller('homeCtrl', ['$scope', function($scope) { $scope.selectedItem = 3; }])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="testApp"> <section ng-controller="homeCtrl"> <select> <option ng-selected="selectedItem == 1" value="1">1</option> <option ng-selected="selectedItem == 2" value="2">2</option> <option ng-selected="selectedItem == 3" value="3">3</option> <option ng-selected="selectedItem == 4" value="4">4</option> </select> </section> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.