繁体   English   中英

ng-model在选择框上具有关联,而ng-repeat在选项上

[英]ng-model with association on select box with ng-repeat on options

这里有一个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-model的需要。

    <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语法是可行的,但这是处理选项的推荐角度方法。

根据您的插件,您需要从select标记中删除ng-model指令才能使其正常工作。

如果您需要为代码设置一个division_id变量,则可以使用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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM