ng-options 的值和标签相等时的错误?

Posted

技术标签:

【中文标题】ng-options 的值和标签相等时的错误?【英文标题】:Bug when value and label of ng-options are equivalent? 【发布时间】:2015-03-14 06:59:20 【问题描述】:

如果我在 $scope.$watch 语句中设置 ng-options,我会遇到问题。

以下作品: <select ... ng-options="x.val as x.id for x in options"></select>

但这不会: <select ... ng-options="x.val as x.val for x in options"></select>

Plunker showing my issue -- click 'update options'

如果模型的值在选项之前设置,并且标签和值是等价的,那么模型将不会匹配任何可用的选项。

这是一个错误,还是我做错了什么?

示例控制器代码:

$scope.myModel = 'Two';
$scope.$watch('loadTrigger', function(newValue, oldValue) 

    if (newValue == oldValue)  return; 

    $scope.options = [id: 1, text: 'One', id: 2, text: 'Two'...];
)

示例视图:

<select ng-model="myModel" ng-options="x.text as x.text for x in options">...</select>

当手表触发并且选项更新时,选择将显示空白或默认选项,而不是预期的“两个”。但是,如果标签和值不同(甚至是轻微的),一切都会按预期进行

【问题讨论】:

请在问题中同时发布相关代码。 这是一个很好的问题,但是您应该将代码的相关和有问题的部分添加到问题中。这个问题应该是自给自足的 抱歉,这基本上是我多年来第一次发帖——希望我现在添加了足够的细节。 当您在dynamicOptions 之后设置textLabel 时,问题也消失了。 plnkr.co/edit/SJ3idXKS1Hyw4C14FCFb?p=preview 不幸的是,我真的没有这样做的灵活性。当我从一组选项更新到第二组时,模型的值实际上可能根本没有改变。如果textLabel 已经设置为Two,在dynamicOptions 之后分配它不会有任何效果 【参考方案1】:

这是 Angular 如何将选定选项与绑定模型相关联的模糊(对我而言)领域之一。

简而言之,添加track by(而不是使用select as)可以解决这个问题:

<select ng-model="textLabel" 
        ng-options="x.text for x in dynamicOptions track by x.text">
   <option value="">[No Value]</option>
</select>

编辑:前段时间我在 Angular 的 github 上发现了这个 issue 讨论,而没有 track by 的方法在 1.2.x Angular 中有效 -> 因此是模糊的部分

【讨论】:

你不应该将它们混合在一起,它们的目的完全不同。请参阅 here 但是由于我无法打开 plunker,我不确定原始问题可能是什么。 我应该担心这个解决方案似乎与角度文档相矛盾吗? -- PSL 打败了我 @PSL,啊,他们终于更新了文档-很好 是的,我想我可能得回去分析一下我在这里使用的模型。省略 as 会产生整个对象,这不是我想要的

以上是关于ng-options 的值和标签相等时的错误?的主要内容,如果未能解决你的问题,请参考以下文章

ng-options语法详解

如何使用代码中的ng-options更改选择中的值?

angularjs: ng-select和ng-options

更新使用 ng-options 生成的选择的模型和选定选项

关于ng-option

AngularJS的一点学习笔记