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

Question

我在这个选择下拉列表中选择了“Enbridge Billing”。

<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) {


    });

编辑:

我刚刚在 Controller 中执行了此操作:

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

Answer 1

Angular 中唯一的事实点是模型。不是景色。您更新模型， View 也会更新自身以反射(reflect)模型的状态。

您将选择框配置为

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

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

顺便说一句，您不应该将 required、ng-pristine 和 ng-valid 设置为选择框的类。 Angular 将根据表单控件的实际状态自行添加和删除此类。