如何在 AngularJS 中根据数据库值选中 dropdown

结论

在 AngularJS 中，不需要手动为 <option> 添加 selected。把 <select> 绑定到 product.payment_status，并让每个 <option> 的 value 与数据库返回值保持一致，AngularJS 就会通过 ng-model 自动选中对应的选项。

<select ng-model="product.payment_status">
  <option value="RECEIVED">Payment Received</option>
  <option value="PENDING">Payment Pending</option>
</select>

如果数据库返回：

product.payment_status = 'PENDING';

下拉框会默认选中 Payment Pending。返回 RECEIVED 时，则会选中 Payment Received。

为什么这样写

ng-model 用于同步数据和表单状态。AngularJS 初始化 <select> 时，会将 product.payment_status 与各个 <option> 的 value 进行比较：

• PENDING 对应 Payment Pending
• RECEIVED 对应 Payment Received

找到匹配项后，AngularJS 会自动设置选中状态。因此，无须使用原生 HTML 的 selected 属性，也不建议再用 ng-selected 重复控制同一个下拉框。

如果非 PENDING 都要选中已收款

如果业务规则是“数据库值为 PENDING 时选中待付款，其他值一律选中已收款”，可以在数据加载完成后先转换状态：

product.payment_status =
    product.payment_status === 'PENDING' ? 'PENDING' : 'RECEIVED';

完整示例：

<div ng-repeat="product in products">
  <p>{{product.GLname}} - {{product.mobno}}</p>
  <p>Item - {{product.item_name}} ({{product.item_code}})</p>
  <p>Qty - {{product.pqty}} Amt - Rs. {{product.rate}}</p>

  <select ng-model="product.payment_status">
    <option value="RECEIVED">Payment Received</option>
    <option value="PENDING">Payment Pending</option>
  </select>
</div>

products.forEach(function (product) {
  product.payment_status =
      product.payment_status === 'PENDING' ? 'PENDING' : 'RECEIVED';
});

如果数据通过 $http 异步获取，需要在请求成功后处理：

$http.get('/api/products').then(function (response) {
  $scope.products = response.data;

  $scope.products.forEach(function (product) {
    product.payment_status =
        product.payment_status === 'PENDING' ? 'PENDING' : 'RECEIVED';
  });
});

选项较多时使用 ng-options

选项较多时，可以在控制器中统一管理状态列表：

$scope.paymentStatuses = [
  { value: 'RECEIVED', label: 'Payment Received' },
  { value: 'PENDING', label: 'Payment Pending' }
];

<select
  ng-model="product.payment_status"
  ng-options="status.value as status.label for status in paymentStatuses">
</select>

订单状态也可以采用同样的写法：

$scope.orderStatuses = [
  { value: 'NEW', label: 'New Order' },
  { value: 'IN_PROGRESS', label: 'In Progress' },
  { value: 'SENT', label: 'Sent' },
  { value: 'DELIVERED', label: 'Delivered' },
  { value: 'CANCELLED', label: 'Cancelled' }
];

<select
  ng-model="product.order_status"
  ng-options="status.value as status.label for status in orderStatuses">
</select>

注意事项

数据库返回值必须与选项值完全一致，大小写也要相同。例如，PENDING 可以匹配 value="PENDING"，但不能匹配 value="Pending"。

还要检查返回值两端是否有空格。如果数据库可能返回 "PENDING "，可以在赋值前清理：

product.payment_status =
    (product.payment_status || '').trim().toUpperCase();

如果数据库中的已收款状态不是 RECEIVED，而是 PAID，那么 <option> 的值也要改为相同内容：

<option value="PAID">Payment Received</option>

总之，ng-model 中的值必须与某个选项的 value 完全匹配。

备注：内容仅供参考。