AngularJS - 下拉列表未显示所选选项

Question

我有这个选择下拉菜单＆＃34; Enbridge Billing＆＃34;地选择。

<select class="form-control required ng-pristine ng-valid" ng-model="finance.payment_method" id="payment_method" name="payment_method">
    <option value=""></option>
    <option value="EGD" selected="selected">Enbridge Billing</option>
    <option value="PAPP">PAD Billing</option>
</select>

但是，在屏幕上，它未被选中：

我已经从app.js中删除了所有内容，但仍然存在问题：

var app = angular.module('portal', []);

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('%%');
    $interpolateProvider.endSymbol('%%');
});

app.controller('NewJobFinanceController',
    function ($scope) {


    });

编辑：

我刚刚在控制器中执行了此操作：

$scope.finance.payment_method = $('#payment_method').find(':selected').val();

Answer 1

角度中的单一真实点是模型。不是观点。您更新模型，视图会自动更新以反映模型的状态。

您将选择框配置为

<select ng-model="finance.payment_method" ...>

这意味着当前选择的值为finance.payment_method。这就是angular获得所选值的位置。由于它未定义，因此您有一个空白的选择框。

顺便说一下，你不应该将你的选择框的类设置为必需的ng-pristine和ng-valid。 angular将自行添加和删除此类，具体取决于表单控件的实际状态。

Answer 2

只需使用ng-selected="true"代替selected="selected"。