当我的模型更新时，AngularJS 1.4.8 在选择中创建一个空选项

Question

我有一项服务，您可以在其中选择不同类型的协议文件。当我第一次加载页面时，协议下拉列表总是正确填充，并且正确的值显示在浏览器中。该协议是从vm.getAgreement() 函数中获取的。像这样：

不过，也可以更新 AgreementDocumentType。这是通过调用vm.save() 函数来完成的，该函数又再次调用vm.getAgreement()。我调试了代码以查看错误发生的时间以及第二次设置vm.agreement = data; 的时间。然而对象data 与第一次完全相同，vm.agreement.AgreementDocumentType 是3。其他所有字段均已正确更新，但保存后选择列表如下所示：

查看生成的 HTML，奇怪的是值为 3 的选项被标记为选中，这是应该的，但下拉列表中仍然没有显示值：value="3" selected="selected">。如果我然后选择 Agreement3 或任何其他值，则空值 (<option value="? number:3 ?"></option>) 将直接从列表中消失。如果有任何帮助，我正在使用 AngularJS 版本 1.4.8。我最好的猜测是，当重新填充vm.agreement.AgreementDocumentType 时，绑定会丢失一瞬间，因此会创建一个空值，并且由于某种原因在与下拉列表交互之前不会删除。有没有人遇到过并解决了？

生成的 HTML：

<select name="Agreement" class="form-control ng-valid ng-valid-required ng-dirty ng-touched" ng-model="vm.agreement.AgreementDocumentType" required="">
    <option value="? number:3 ?"></option>
     <!-- ngRepeat: option in vm.agreementTypes -->
     <option ng-selected="vm.agreement.AgreementDocumentType == option.id" ng-repeat="option in vm.agreementTypes" ng-value="option.id" class="ng-binding ng-scope" value="1">
         Agreement1
     </option>
     <!-- end ngRepeat: option in vm.agreementTypes -->
     <option ng-selected="vm.agreement.AgreementDocumentType == option.id" ng-repeat="option in vm.agreementTypes" ng-value="option.id" class="ng-binding ng-scope" value="2">
         Agreement2
     </option>
     <!-- end ngRepeat: option in vm.agreementTypes -->
     <option ng-selected="vm.agreement.AgreementDocumentType == option.id" ng-repeat="option in vm.agreementTypes" ng-value="option.id" class="ng-binding ng-scope" value="3" selected="selected">
         Agreement3
     </option>
     <!-- end ngRepeat: option in vm.agreementTypes -->
</select>

HTML：

<select name="Agreement" class="form-control" ng-model="vm.agreement.AgreementDocumentType" required>
    <option ng-selected="vm.agreement.AgreementDocumentType == option.id"
            ng-repeat="option in vm.agreementTypes"
            ng-value="option.id">
        {{option.label}}
    </option>
</select>

控制器：

vm.agreementTypes = [
    { id: 1, label: 'Agreement1' },
    { id: 2, label: 'Agreement2' },
    { id: 3, label: 'Agreement3' }
];

vm.save = function () {
    agreementResource.update({ agreementId: vm.agreementId }, vm.agreement).$promise.then(function () {
        toastr.success('Agreement saved');
        vm.getAgreement();
    });
};

vm.getAgreement = function () {
    agreementResource.get({ agreementId: vm.agreementId }).$promise.then(function (data) {
        vm.agreement = data;
    });
}

vm.getAgreement();

Answer 1

我认为因为您是手动构建选项，所以当从范围方面更改模型时，angularjs 内部没有正确绑定您的模型，还有更多selected="selected" 要做，这个内部是由ngOptions 指令制作的，考虑使用它而不是手动构建选项列表。

<select
    name="Agreement"
    class="form-control" 
    ng-model="vm.agreement.AgreementDocumentType"
    ng-options="option.id as option.label for option in vm.agreementTypes"
    required>
</select>