选择框上具有关联的ng-model与选项上的ng-repeat

时间:2016-05-09 20:54:50

标签: javascript html angularjs

我有Plunker here illustrating my issue。我有一个关联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

我正在构建选择框的方式是 <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> ,我希望这样可以避免跟踪所选值的ng-model的需要。

selected

正如您在演示中看到的那样,division_id: 3属性被放置在右侧选项中,但选择框显示仍为空白。即使我向对象添加ng-repeat,它仍然是空白的。如何在加载和更新时不必对对象进行转换,从而使其工作?

修改:要解决此问题被标记为重复的问题,我认为这是独特的,因为我问的是如何使用ng-options构建选择框,而不是{{1} }。虽然答案类似于拟议副本的答案,但我认为其他人可能会对此方法感到困惑,并认为看到答案需要不同的技术会有所帮助。

2 个答案:

答案 0 :(得分:0)

如果您按如下所示更新您的选择,它将默认显示给用户division.id。

ClickableQLabel

您似乎想要一个单独的模型<select ng-model="user.division" ng-options="d as d.name for d in divisions track by d.id"> ,我能想到的唯一原因是您希望在更新选择时控制division_id模型的持久性。如果由于某种原因你想要拦截最终用户选择到更新的用户模型(甚至只是内存中的用户对象)然后使用副本/有很多方法可以做到这一点,但它不是如果那是你要问的话,请说清楚。

Updated plunkr

请注意,它可以保留相同的选项user语法,但这是处理选项的推荐角度方式。

答案 1 :(得分:0)

根据您的plunker,您需要从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>