ng-selected 不起作用，但将选项修改为 selected="selected"，使用 ng-repeat

Posted 2023-03-07

【中文标题】ng-selected 不起作用，但将选项修改为 selected="selected"，使用 ng-repeat

【英文标题】：ng-selected does not work but modifies option as selected="selected", working with ng-repeat

【发布时间】：2019-09-21 21:02:29

【问题描述】：

我需要选择从我的数据库中获得的值。在 html 中检查，我看到 <option> 之一的值更改为：selected="selected" 但在选择中它并没有真正被选中。

这是我的代码：

<select chosen class="form-control" name="state" ng-model="product.state" ng-change="updateData()" placeholder-text-single="'Select one'" required >
    <option value="">Select one</option>
    <option ng-repeat='i in statesList' value="i.id" ng-selected="i.id == product.state.id">i.name</option>
</select>

我尝试将ng-model 的值更改为ng-model="product.state.id" 并且它可以工作，它保持选中状态，但是当然，以后不会保存数据。

statesList 是从 mongodb 数据库集合中检索到的对象数组。

我已经阅读了其他类似的问题，但我无法解决我的问题。我是角度方面的新手，对我来说有一些复杂的问题。有什么解决方案？我该如何解决？

【参考方案1】：

 <select multiple ui-select2="allowClear: true" ng- 
 model="selectedCountries" data-placeholder="Countries">
 <option ng-repeat="country in countries" value="country.id"> 
 country.name</option>
 </select>
 <button ng-click="fetch()" class="btn btn-primary pull-right">Apply</button>

添加优先级的解决方案奏效了

【参考方案2】：

在我的项目中，我使用 Reactive 表单处理了选择控件，你可以这样尝试

this.testForm = this.formBuilder.group(
      "testselectControl": []);

在html中

  <select id="test1" formControlName="testselectControl"
        class="form-control p-0 start-date-input-box ">
        <option *ngFor="let val of listValues" [value]="val.id">
          name.name</option>
      </select>

当你收到这样的数据集值时

 this.testForm .get("testselectControl").setValue(listValues ? (listValues.find((value) => (value.id.trim() ==selectedValueId) : "0");

【参考方案3】：

不需要 ng-change 处理程序。 通过使用 ng-options 尝试以下方法。该模型将始终具有最新的选定值。

<select name="state" id="state"
  ng-options="option.name for option in statesList track by option.id"
  ng-model="product.state"></select>