Question

我想我在这里有一些特殊的代码，因为我可以谷歌对我的问题来说“太简单”了，遗憾的是，它也没有帮助我自己找到解决方案。我有一个2个收音机的单选按钮组。我正在迭代来自后端的“类型”数据以创建单选按钮。我的问题是数据绑定：当我想编辑一个对象时，它的“类型”设置正确，但没有被视图注册，因此它没有选择所需的选项。

掌握我的情况：
后端为我提供“typeList”：

[
 {"text":"cool option","enumm":"COOL"},
 {"text":"option maximus","enumm":"MAX"}
]

HTML代码：

<span ng-repeat="type in typeList track by type.enumm">
    <input 
         type="radio" 
         name="type" required 
         ng-model="myCtrl.object.type" 
         ng-value="type">
    {{type.text}}
</span>

一些解释
我不想使用“裸”文本，我想使用某种标识符 - 在这种情况下它是一个枚举。所选择的值应该是整个“类型”，不仅是“type.text”，因为后端需要类型，而不是简单的String。所以我所做的一切都是一个包的东西，type.text用于类似格式化/国际化的文本等。

通过在控制器中设置此选项来进行预选：this.object.type = typeList[0]; 第一个单选按钮已被选中，很棒。

但是为什么在编辑对象时没有选择它。我在HTML中使用{{myCtrl.object.type}}制作了“日志”，结果为{"text":"cool option","enumm":"COOL"}。在预先选择时非常相似。我已经使用选择输入使用相同的“技术”，它工作正常。我还发现一些谷歌搜索结果“由于父/子范围而使用$ parent”。但是1）我没有那么直接，2）认为这不是问题，因为我使用的是控制器范围，而不是$ scope，还是这个想法错了？

可能会被解释得很糟糕，如果是这样，很抱歉，但我希望有人1）得到我想要的东西，2）知道解决方案。

谢谢！

Answer 1

如果您尝试绑定到数组中的元素，我相信您需要将数组中的实际元素分配给模型属性。

所以这会创建一个新的obj并将其设置为$scope.selectedType（不是你想要的）：

$scope.selectedType = {"text":"cool option","enumm":"COOL"};

而这会分配数组的第一个元素（这就是你想要的）

$scope.selectedType = $scope.typeList[0];

因此，要更改模型，您可以从数组中查找条目并使用类似的内容将其分配给模型

$scope.selectedType = $scope.typeList.filter(...)

以下是此方法的一个简单示例http://plnkr.co/edit/wvq8yH7WIj7rH2SBI8qF

AngularJS：如何将正确的模型放到重复的单选按钮上

1 个答案: