选择框中带有关联的ng模型，选项中带有ng重复

ng-model with association on select box with ng-repeat on options

本文关键字：ng 重复 选项 模型 关联 选择      更新时间：2023-09-26

我这里有一个Plunker来说明我的问题。我有一个具有关联division的对象。对象上没有division_id，但为了设置或更新division，我需要设置division_id字段。以下是示例对象：

$scope.user = {
  name: "John",
  age: 32,
  division: {
    id: 3,
    name: "Alpha"
  }
};

示例划分：

$scope.divisions = [
  {
    name: "Gamma",
    id: 1
  },
  {
    name: "Alpha",
    id: 3
  },
  {
    name: "Beta",
    id: 5
  }
];

我构建选择框的方式是使用ng-repeat，我希望它可以绕过跟踪所选值的ng模型的需要。

    <div class="form-group">
      <label for="">Division</label>
      <select type="text" ng-model="user.division_id">
        <option ng-repeat="division in divisions"
          ng-selected="user.division.id == division.id">{{ division.name }}</option>
      </select>
    </div>

正如您在演示中看到的，selected属性被放置在右侧选项上，但选择框显示仍然是空白的。即使我将division_id: 3添加到对象中，它仍然是空白的。在加载和更新时，我如何在不必对对象进行转换的情况下实现这一点？

编辑：为了解决这个被标记为重复的问题，我认为这是唯一的，因为我在问如何使用ng-repeat而不是ng-options构建选择框。虽然答案与提议的副本的答案相似，但我认为其他人可能会陷入这种方法，并发现看到答案需要不同的技术会有所帮助。

如果按如下方式更新您的选择，它将默认显示给用户division.id.

<select ng-model="user.division" ng-options="d as d.name for d in divisions track by d.id">

您似乎希望有一个单独的模型division_id，我能想到的唯一原因是，您希望在更新选择时控制user模型的持久性。如果出于某种原因，您想截取最终用户对正在更新的用户模型（甚至只是内存中的用户对象）的选择，那么可以使用副本/有很多方法可以做到这一点，但尚不清楚这是否是您所要求的。

更新的plunkr

注意，保持相同的选项ng-repeat语法是可行的，但这是处理选项的推荐角度方式。

根据您的plunker，您需要从select标记中删除ng模型指令，它才能工作。

如果需要为代码设置divisionid变量，可以使用ng-init。

<div class="form-group">
  <label for="">Division</label>
    <select type="text">
       <option ng-repeat="division in divisions"
          ng-selected="user.division.id == division.id"
          ng-init="division_id=division.name">{{ division.name }}
       </option>
      </select>
    </div>
相关文章：