根据收到的值预选下拉选择选项
[英]Pre-select the dropdown select option according to value received
问题描述
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. 我在JSON中以1到12之间的数字接收status的值。 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 . 例如，如果JSON的状态为2，则在具有状态的行中选择的默认值必须为“待批准”，依此类推。 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 . 我已经看了很多东西，但是我只能找到ng-options用来填充select标记，但是我没有在JSON中接收它们，所以我已经在<td>标记中对其进行了硬编码，其中每一行都是正在ng-repeat上工作。 Also , I thought of using .val function but i guess for different rows i might have to set different ids. 另外，我想到了使用.val函数，但是我猜对于不同的行，我可能不得不设置不同的ID。
2 个解决方案
解决方案1
1 已采纳 2015-08-02 20:00:40
Just use AngularJS data binding with ng-model 只需将AngularJS数据绑定与ng-model
HTML: 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: JS：
angular.module('myApp', [])
.controller('dummy', ['$scope', function ($scope) {
$scope.data = {
status: 2
};
}]);
解决方案2
0 2015-08-02 19:55:11
ng-selected works on option tag and not on select tag. ng-selected适用于option标签，而不适用于select标签。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.