使用 angular.js 在静态下拉列表中选择不同的值答案

【问题标题】：Select a different value in a static dropdown using angular.js使用 angular.js 在静态下拉列表中选择不同的值
【发布时间】：2012-08-29 10:51:34
【问题描述】：

我有一个 Magento 产品页面，该页面生成静态选择元素，价格机制与后端相关联，因此我无法触摸这些下拉菜单。我正在使用 angular.js 单选元素来接收用户输入，这反过来会更新静态下拉列表的选定选项。

我不知道如何将两者联系起来，我在这里重现了问题：http://jsfiddle.net/ldn_tech_exec/smBdC/1/

我希望单选按钮更新下拉列表，但我只能在创建下拉列表后操作，可能使用 jquery 插入所需的任何角度指令。

【问题讨论】：

【解决方案1】：

再次更新：您的选择列表需要一个 ng-model，并且应该使用 ng-options 生成选项。当您选择一个单选按钮时，您触发的控制器方法应该更新该 ng-model，这将导致选择列表更新。见http://docs.angularjs.org/api/ng.directive:select

更新 #3：我错过了您最初无法修改选择列表的事实。请参阅下面 cmets 中的我的小提琴以获取可行的解决方案。

【讨论】：

谢谢马克。但是，我无法使用 ng-options 生成下拉列表，因为它是由 Magento 生成的。我查看了 ng-selected，如果我可以在 DOM 加载后将指令注入下拉列表，然后让 Angular 识别更改，这可能是一个选项。很快就会更新。
签出 ng-selected，不幸的是，它仅适用于将复选框链接到单个值下拉列表
看看这是否符合你的要求：jsfiddle.net/mrajcok/HCPku 我使用这个技巧deansofer.com/posts/view/14/… 将 ng-model 添加到控制器的选择列表中（在 $timeout 内等待 DOM 完成渲染），然后在 calculateUpgradeSupplement() 中循环选择列表以找到匹配的层，然后更新模型。由于模型更新，Angular 随后更新了选择列表。
请注意，在我的小提琴中，下拉菜单不会更新收音机——这对您的应用程序有影响吗？

【解决方案2】：

听起来您有一些产品的价格取决于设置的选项。

如果是这种情况，那么从您的单选按钮更新下拉菜单相对简单 - 或者至少取决于您的原型/jquery 技能。

但是有一个问题：一旦你用“看不见的手”更新了 javascript 中的下拉菜单，就会有更多的 javascript 代码来更新价格和可用性。为此，您需要对事件进行冒泡。如果使用原型，这不会自动发生。

我希望我可以破解“气泡代码”，但我目前手头没有它，此外，你还没有卡在那个点上，但是......

【讨论】：

我不是在询问使用原型或 jquery 更新它。我想使用 angular 进行更新，因为所选值已经在 angular 模型中
不是很清楚你的页面上什么是 angular 和什么是股票 Magento，但是，有前端 product.js 代码来填充这些标准下拉列表。您的代码基本上必须在此之后运行，因此您可能希望在 javascript 而不是模板代码中创建单选按钮。
这个问题与 Magento javascript 无关。看看js fiddle